📌 immer

🍞 immer 사용법

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

produce 함수는 두 가지 파라미터를 받는다

• 첫 번째 파라미터 : 수정하고 싶은 상태
• 두 번째 파라미터 : 상태를 어떻게 업데이트할지 정의하는 함수

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

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

immer를 사용해 컴포넌트 상태를 작성할 때는 객체 안에 있는 값을 직접 수정하거나, 배열에 직접적인 변화를 일으키는 push, slice 등의 함수를 사용해도 된다

또한 immer를 사용한다고 해서 무조건 코드가 간결해지는 것은 아니기 때문에 immer는 불변성을 유지하는 코드가 복잡할 때만 사용해도 충분하다

🍞 에러 수정

export 'default' (imported as 'produce') was not found in 'immer' (possible exports: Immer, applyPatches, castDraft, castImmutable, createDraft, current, enableMapSet, enablePatches, finishDraft, freeze, immerable, isDraft, isDraftable, nothing, original, produce, produceWithPatches, setAutoFreeze, setUseStrictShallowCopy)

immer 실습 중 해당 에러메세지를 받고 검색해보니 다음의 방법으로 해결되었다

import produce from 'immer' 부분을 import { produce } from 'immer'로 바꾸면 된다

🍞 useState의 함수형 업데이트와 immer 함께 쓰기

produce 함수의 첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환한다

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

이러한 속성을 기억하고 다음과 같이 useState의 함수형 업데이트와 함께 활용하면 좋다

const onChange = useCallback((e) => {
    const { name, value } = e.target;
    setForm(
      produce((draft) => {
        draft[name] = value;
      })
    );
  }, []);