불변성을 지키면서 setState

불변성의 필요성 

react에서 기존 데이터를 수정할 때 기존의 객체를 수정하는 대신 새롭게 객체를 만들어 교체해주는 방식으로 진행한다.
그래야 React.memo를 사용했을 때 props 변화 여부를 알아내 리렌더링 성능을 최적화할 수 있기 때문이다. 

  const onToggleHandler = useCallback((id) => {
    dispatch({ type: 'REMOVE', id });
    setTodos((todos) =>
      todos.map((todo) =>
        todo.id === id ? { ...todo, checked: !todo.checked } : todo,
      ),
    );
  }, []);

•   - { ...todo, checked: !todo.checked }  로 새롭게 객체를 만들어 줌 

기존의 값을 수정하지 않고 새로운 값을 만들어 내는 것을 '불변성을 지킨다' 고 한다.

 

 

전개연산자를 사용하여 불변성을 지키는(새로운 객체를 생성하는) 예시

const array = [1,2,3,4,5]
const nextArrayBad = array; 
nextArrayBad[0] = 100;
console.log(array === nextArrayBad); //true

const nextArrayGood = [...array]; 
nextArrayGood[0] = 100;
console.log(array === nextArrayBad); //false

nextArrayGood는 새로 만들어진 배열로, 불변성이 지켜졌다.

 

const object = {
  foo : 'bar',
  value : 1,
}

const nextObjectBad = object;  //객체가 복사되지 않고 같은 객체를 가리킨다.
nextObjectBad.value = object.value + 1;
console.log(nextObjectBad === object) //true;

const nextObjectGood = {    //새로운 값을 덮어쓴다.
	...object,           
    value : object.value +1
}
console.log(nextObjectGood === object) //false;

nextObjectGood는 새로 만들어진 객체로, 불변성이 지켜졌다.

그러나 전개연산자를 사용하여 객체나 배열 내부의 값을 복사할 때는 얕은 복사를 하게 된다.
객체안의 객체가 있는 경우 불변성을 유지하기 어려워지므로 불변성 유지위해 immer 라이브러리 등의 도움을 받을수 있다.