immer 사용법


import produce from "immer";

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

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

첫번째 파라미터는 수정하고 싶은 상태이고,

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

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

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'}

immer의 속성과 useState 함수형 업데이트를 함께 활용하여, 코드를 더욱 깔끔하게 만들 수 있다.