TIL [리액트 컴포넌트에서 state를 사용할 때 주의 사항]

1. 클래스형 컴포넌트와 함수형 컴포넌트에서 배열이나 객체의 state를 바꿀때 잘못된 예

this.state.array = this.state.array.push(1);
this.state.object.name = 'something';

push는 배열의 원본을 object.key는 객체의 원본을 바꾸기 때문에 state를 바꿀때 쓰면 안된다.

2. 배열이나 객체의 state를 바꿀때 옳바른 예

배열이나 객체를 업데이트 할 때는 배열이나 객체의 사본을 만들고 그 사본에 값을 업데이트한 후에, 그 사본을 가지고 setState나 useState를 이용해서 기존의 값을 덮어주어야 한다.

state = {
  arr: [
    {id: 1, clicked: true},
    {id: 2, clicked: true},
    {id: 3, clicked: true},
  ]
} 
           .
           .
           .

const arr = this.state.arr;
arr = arr.concat({id: 4, clicked: true})
this.setState({arr});

const [form, setForm] = useState({
  username: '',
  name: '',
});
           .
           .
           .

const {username, name} = form;
const onChange = e => {
  const newForm = { ...form, // 기존의 form을 복사한 뒤
    [e.target.name]: e.target.value // 원하는 값만 업데이트
  };
  setForm(newForm); // 기존의 원본을 사본으로 대체 (원본에는 영향 x)
}
      

배열은 concat, filter, map, reduce를 쓰고 객체는 spread 연산자를 이용하여 원본의 배열과 객체를 바꾸지 않고 계속 보존해 준다.