🎈 들어가며

<리액트를 다루는 기술> 12장 immer을 사용하여 더 쉽게 불변성 유지하기를 공부하면서 정리한 내용입니다📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다.

🎈 immer을 쓰는 이유

저번 포스트 [React] 컴포넌트 성능 최적화 에서 ...문법과 배열의 내장 함수로 배열을 얕은 복사해서 새로운 값을 덮어쓰는 방법을 썼는데요.

nextTodos[0] = {
  ...nextTodos[0], //기존 값들은 유지
  checked: false // 바꿔줄 값만 새로 할당
} // 새 객체를 할당

(대충 이런식)

만일에 여기서 더 나아가서 객체 안에 배열 안에 객체 안에 배열...같은 구조라면 어떨까요?

const object = {
	somwhere: {
    	deep: {
        	inside: 3,
          	array: [1,2,3,4]
        }
    }
};

이렇게 중첩된 배열이나 객체가 많은 경우 값 하나를 업데이트 하려면 하나하나

...문법

으로 기존 값을 가져와야합니다. 너무 귀찮죠.. 이를 보완하기 위해 나온 라이브러리가 immer입니다.

🎈 immer 설치 & 사용하기

immer 설치하기

npm install --save immer

import

import produce from 'immer';

immer 사용하기

🍧 produce(수정하고 싶은 state, state를 어떻게 업데이트할 지 정의하는 함수)

• 두개의 인자를 다 넣으면 첫번째 인자에 넣은 state의 불변성을 유지하며 새로운 상태를 만들어줌