immer란?

상태를 업데이트할 때 알아서 불변성을 관리해주는 라이브러리 즉 push, splice 같은 배열의 원본을 건드리는 메소드도 쓸 수 있음

• 설치

  yarn add immer
  

• 사용법

  import produce from "immer";
  
  const nextState = produce(currentState, (draft) => { function })
  // produce를 통해서 사용함
  

  • nextState: 다음 상태 변수 이름
  • currentState: 업데이트하고자 하는 현재 상태값
  • draft: 현재 상태값을 복사해서 사용

  // 사용 예시
  const state = {
    number: 1,
    dontChangeMePlz: 2,
  };
  
  const nextState = produce(state, (draft) => {
    draft.number += 1; // number를 1씩 더하기로 했음
  });
  
  console.log(nextState);
  // { number: 2, dontChangeMePlz: 2 } 객체를 복사하지도 않았는데 donChangeMePlz는 그대로임
  

useState에서 Immer 사용하기

기존 useState에선 이렇게 작성했습니다

const [text, setText] = useState({
  text: "arm",
  done: false,
});

const onChange = useCallback(() => {
  setText((text) => ({
    ...text, // 함수형 업데이트를 해줘야만 했습니다
    done: !todo.done,
  }));
}, []);

하지만 Immer를 사용한다면 다음과 같이 됩니다

cosnt[(text, setText)] = useState({
  text: "arm",
  done: false,
});

const onChange = useCallback(() => {
  setText(
    produce((draft) => {
      draft.done = !draft.done;
    })
  );
}, []);