함수형 컴포넌트에서 useState 사용하기

리액트 v 16.8 이전에는 함수형 컴포넌트에서 state를 사용할 수 없었지만
리액트 v 16.8 부터는 Hooks을 사용해서, 사용할 수 있게 됬다.

배열 비구조화 할당

useState 사용

useState는 한 컴포넌트 에서 여러 번 사용할 수 있다.

state를 사용할 때 주의사항

• state 값을 바꿀때는 setState나 useState를 사용해야 한다.
• 배열이나 객체를 수정해야 한다면, 객체를 복사해 만들고 복사한 객체의 상태를 setState 혹은 세터 함수를 통해 수정한다.

// 객체 다루기
const obj = { a: 1, b: 2 };
const nextObj = { ...obj, b: 2 };

// 배열 다루기
const array = [
   { id: 1, value: true },
   { id: 2, value: false },
];

let nextArray = array.concat({ id: 4 });	// 새 항목 추가
nextArray.filter(item => item.id !== 2);	// id가 2인 항목 제거
nextArray.map(item.id === 1 ? {...item, value: false } : item ); // id가 1인 항목 value: false로 지정.

cf. ...obj 같은 방식을 spread 연산자라고 한다

[참고] 리액트 다루는 기술 p.115