🔶 효과 & 사용하는 경우

• 상태 업데이트 까다로울 때 좋음
  • 구조가 복잡한 객체도 쉽고 짧은 코드를 사용 → 불변성 유지 + 업데이트 가능
  • 리덕스
• 편의를 위한 것
  • 필수 x
  • 사용 시 → 생산성 ↑

🔶 설치

$ yarn add immer

🔶 사용법

🔹 형식 & 원리

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

◼ [ 형식 ] produce 함수

• 1번째 파라미터

  수정하고 싶은 상태

• 2번째 파라미터

  상태를 어떻게 업데이트할지 정의하는 함수

  • 함수 내부에서 원하는 값 변경 시

    → produce 함수가 대신 불변성 유지 & 새로운 상태 생성

◼ 특징

• 깊은 곳에 위치하는 값 변경 + 배열 처리 시 매우 쉬움

• 객체/배열 직접적 변화 시키는 함수(ex. push, splice) 사용 ok

• 무조건 간결 해지지 x

  → 코드 복잡할 때만 사용해도 충분

🔹 예시 코드

import produce from "immer";

const originalState = [
  {
    id: 1,
    todo: "a",
    checked: true,
  },
  {
    id: 2,
    todo: "b",
    checked: false,
  },
];

const nextState = produce(originalState, (draft) => {
  // id가 2인 항목의 checked 값 -> true로 설정
  const todo = draft.find((t) => t.id === 2); // id로 항목 찾기
  todo.checked = true;
    // 혹은 draft[1].checked = true

  // 배열에 새로운 데이터 추가
  draft.push({
    id: 3,
    todo: "c",
    checked: false,
  });

  // id = 1인 항목 제거
  draft.splice(
    draft.findIndex((t) => t.id === 1),
    1
  );
});

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

🔹 immer의 업데이트 함수 반환 방법

produce 함수의 1 번째 파라미터 → 함수 형태

• 예시 코드
  

    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의 함수형 업데이트 + immer 속성

• 기존 코드
  

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

• 적용 코드
  

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

• 달라진 부분

  • 1번째 파라미터→ 함수 형태
  • 빈 배열 ([])