React Immer

Immer 의 장점

1. 상태 업데이트 간소화: draft를 직접 수정할 수 있어 코드가 더 직관적이고 간결하다.
2. 불변성 자동 관리: Immer가 내부적으로 불변성을 처리하므로, 개발자는 상태 업데이트에만 집중할 수 있다.
3. 중복 코드 감소: map()이나 filter()를 사용해 배열을 새로 생성하는 등의 작업을 하지 않아도 된다.

1.Immer 사용 전

기본, 상태를 업데이트할 때마다 새로운 상태를 만들어주는 방식

setTodos 함수로 상태를 업데이트할 때 새로운 배열을 생성하여 불변성을 유지

각 항목을 수정할 때마다 todo 객체를 복사하고, 새로운 배열을 반환한다.

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'React 배우기', completed: false },
    { id: 2, text: 'Redux 배우기', completed: false },
  ]);

  const toggleCompletion = (id) => {
    // 상태를 불변적으로 업데이트
    setTodos((prevTodos) => {
      return prevTodos.map((todo) => {
        if (todo.id === id) {
          return { ...todo, completed: !todo.completed }; // 새로운 todo 객체 반환
        }
        return todo;
      });
    });
  };

  return (
    <div>
      <h1>할 일 목록</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleCompletion(todo.id)}
            />
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

 

2.Immer 사용 후

Immer를 사용, mutable draft 객체를 사용하여 더 직관적으로 상태를 수정

import React, { useState } from 'react';
import immerProduce from 'immer'; // 라이브러리 추가

function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'React 배우기', completed: false },
    { id: 2, text: 'Redux 배우기', completed: false },
  ]);

  const toggleCompletion = (id) => {
    setTodos((prevTodos) =>
      immerProduce(prevTodos, (draft) => { // immer 처리
        const todo = draft.find((todo) => todo.id === id);
        if (todo) {
          todo.completed = !todo.completed; // draft 객체를 직접 수정
        }
      })
    );
  };

  return (
    <div>
      <h1>할 일 목록</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleCompletion(todo.id)}
            />
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

 

다른 예제 (간결한 코드)

1.Immer 사용 전

// 배열에 새 항목을 추가
setData((prevData) => ({
    ...prevData, // 기존 data 상태 복사
    array: [...prevData.array, info], // 배열에 새 항목 추가
}));

 

2.Immer 사용 후

setData(
    produce((draft) => {
        draft.array.splice(
            draft.array.findIndex((info) => info.id === id),
            1
        );
    })
);