state 사용시 주의사항

🧀 클래스 컴포넌트, 함수형 컴포넌트든 state 사용시 주의점

state값을 바꿀 때는 setState 또는 useState를 통해 전달받은 세터함수를 사용해야한다. 배열이나 객체를 업데이트 할 때는 이렇게 처리해줘야 한다. => 배열, 객체 사본을 만들고 그 사본에 값을 업데이트 한 후, 그 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트해주기.

//객체 다루기
const object = { a:1, b:2, c:3 };
const nextObject = {...object, b:2}; // 사본을 만들어 b값만 덮어 쓰기

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

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

객체에 대한 복사본을 만들 때는 spreed라는 연산자라 불리는 스프레드 기법(...)을 사용하여 처리한다. 그리고 배열의 내장 함수들을 활용하자! props와 state는 둘 다 컴포넌트에서 사용하거나 렌 더링할 데이터를 담고 있으므로 비슷해 보일 수 있지만 역할은 다르다.

🧀 props와 state 역할소개

props는 부모 컴포넌트가 설정하고 state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 할 수 있다. props를 사용한다고 해서 값이 무조건 고정적이지는 않는다. 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생 시 부모 컴포넌트의 메서드를 호출하면 props도 유동적으로 사용할 수 있다.