스프레드 연산자 이용해서 코드 리팩토링하기

기존에 사용하던 구조는 확장이 거의 불가능한 구조다.
(데이터 항목이 추가될 때마다 state와 함수, variables를 추가해줘야 한다.)

확장 가능한 구조로 리팩토링 고고

state

👇🏻 여러 개의 state 선언을 객체 타입의 inputs state로 한번에 묶는다.

variables

👇🏻 값을 보낼 때 간편해진다.

onChange

👇🏻 onChange 함수는 값을 한번 다 넣어주고 바뀐 값을 밑에서 추가해준다. (change가 일어난 키의 값은 두번 들어가게 된다.)

(이렇게 title을 두번 넣어줘도 어차피 아래 값이 들어간다!!)

객체의 원리

같은 키를 중복으로 선언하면, 아래에서 선언한 것이 적용된다.

따라서, 먼저 넣어주는 내용은 스프레드 연산자를 활용해서 간단하게 넣고, change되어서 들어오는 값을 아래 써준다.

👇🏻 id를 활용하면 이렇게 바꿀 수 있다.
onChange 함수를 각 키별로 만들지 않고, 하나만 만들어놓고 쓸 수 있음!

[대괄호]로 감싸면 먼저 안의 내용 변환이 이루어져서 writer가 들어오게 된다.

최종