[React] Immer란?

Immer 란?

React에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리

Immer 라이브러리를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 해줄 수 있다.

---

React 컴포넌트에서 상태를 업데이트 할 때불변성을 지키는 것은 매우 중요하다고 명시하고있고

Immer를 검색하면 제일먼저 보이는 것이 불변성이다

 

# 불변성이란?

불변성을 지킨다는 말은 '기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말한다'

 

내가 이해한 '불변성을 지킨다' 는 배열 array가 있을 때 이 array의 요소를 직접 수정하지 않고 

• 추가 : concat(인자로 주어진 배열이나 값을 기존 배열과 합쳐서 새로운 배열은 만든다)
• 삭제 : filter(주어진 조건에 맞는 것들을 가져와서 새로운 배열을 만든다)
• 수정 : map(배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 만든다)
• slice(배열의 begin부터 end까지 얕은 복사본을 가져와 새로운 배열을만든다)
• 추가/삭제.수정 : ... 전개연산자를 사용해서 요소를 더한 새로운 배열을 만들어낸다

등의 방법을 이용해서 기존의 값을 수정하지 않고 새로운 값을 만들어 내는 것이다

 

객체 구조가 깊어지면 값 하나를 업데이트하기 위해 코드를 길게 작성해야 할 때가 있는데

이럴 때, Immer라이브러리의 produce함수를 사용하면 코드가 정말 간결해진다고 한다

---

# Immer 설치 및 사용법

- 사용할 프로젝트에 yarn add immer / npm install immer  이용해서 설치

- 해당 컴포넌트에 immer 라이브러리의 produce함수를 import해준다

import produce from "immer";

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

produce(state, draft => {})

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

 

 

- 일반적인 immer 사용 예시

import produce from "immer"

const baseState = [
    {
        title: "Learn Immer",
        done: true
    },
    {
        title: "Try Immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({title: "Tweet about it"})
    draftState[1].done = true
})

- useState와 함께 사용하는 예시 : useState에서 setState 안에서 produce를 실행시켜서 값을 바꿔준다

import React, { useCallback, useState } from "react";
import produce from "immer";

const TodoList = () => {
  const [todos, setTodos] = useState([
    {
      id: "React",
      title: "Learn React",
      done: true
    },
    {
      id: "Immer",
      title: "Try Immer",
      done: false
    }
  ]);

  const handleToggle = useCallback((id) => {
    setTodos(
      produce((draft) => {
        const todo = draft.find((todo) => todo.id === id);
        todo.done = !todo.done;
      })
    );
  }, []);

  const handleAdd = useCallback(() => {
    setTodos(
      produce((draft) => {
        draft.push({
          id: "todo_" + Math.random(),
          title: "A new todo",
          done: false
        });
      })
    );
  }, []);

  return (<div>{*/ See CodeSandbox */}</div>)
}