12장 immer를 사용하여 더 쉽게 불변성 유지하기

• immer를 사용하면 객체의 불변성을 유지하는 작업을 매우 간단하게 처리할 수 있음. 단, concat, filter등을 통해 간결하게 불변성이 유지되는 경우는  굳이 immmer를 사용하지 않아도 됨.
• immer를 사용하면 컴포넌트 상태를 작성할 때 객체 안에 있는 값을 직접 수정하거나, 배열에 직접적인 변화를 일으키는 push, slice등의 함수를 사용해도 무방함.

12.1 immer를 설치하고 사용법 알아보기

yarn add immer

produce(originalState, draft)

• originalState  : 수정하고 싶은 상태
• draft : 상태를 어떻게 업데이트할지 정의하는 함수

import produce from 'immer';

const nextState = produce(originalState, draft => {
	draft.somewhere.depp.isuue = 5;
    }
);

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

const update = (draft => {
	draft.value = 2;
});

cont originalState = {
	value : 1,
    foo : 'bar',
}

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