immer를 사용하면 불변성을 유지하는 작업을 매우 간단하게 처리할 수 있게 된다.

import produict from 'immer';
const nextState = produce(originalState, draft => {
	// 바꾸고 싶은 값 바꾸기
	draft.somewhere.deep.inside = 5;
})

테스트 코드

https://codesandbox.io/s/12react-immer-tutorial-rogjb?file=/src/App.js

produce라는 함수는 두 가지 파라미터를 받는다. 첫 번째 파라미터는 수정하고 싶은 상태이고, 두번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수이다.

두 번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, produce 함수가 불변성 유지를 대신해 주면서 새로운 상태를 생성하는 방식이다.

이 라이브러리의 핵심은 **'불변성에 신경 쓰지 않는 것처럼 코드를 작성하되 불변성 관리는 제대로 해 주는 것'**이다.

useSate의 함수형 업데이트와 immer 함께 사용하기

immer에서 제공하는 produce 함수를 호출할 때, 첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환한다.

const update = (draft => {
	draft.value = 2;
});
const originalState = {
	value: 1,
	foo: 'bar',
};
const nextState = update(originalState);
console.log(nextState); // {value: 2, foo: 'bar'}