[React] Study # 22 | Immer를 사용한 더 쉬운 불변성 관리

리액트에서는 배열이나 객체를 업데이트 해야할 때, 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해주어야한다.

이때, concat, filter, map등의 함수를 사용해야한다.

 

하지만, 만약 객체의 데이터 구조가 복잡해지면 불변성을 지켜가며 새로운 데이터를 생성해내는 코드가 조금 복잡해지게 된다.

 

이때, immer라는 라이브러리를 사용하면

우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리를 대신 해준다.

 

---

Immer 사용법

1️⃣ Immer 설치

yarn add immer

 

2️⃣ immer 불러오기

보통은 produce라는 이름으로 불러온다.

import produce from 'immer';

 

3️⃣ produce 함수 사용법

• 첫번째 파라미터 : 수정하고 싶은 상태
• 두번째 파라미터 : 어떻게 업데이트 하고 싶을 지 정의하는 함수
• 두번째 파라미터에 넣는 함수에서는 불변성에 대해서 신경쓰지 않고 그냥 업데이트 해주면 다 알아서 해준다.

const state = {
  number: 1,
  dontChangeMe: 2
};

const nextState = produce(state, draft => {
  draft.number += 1;
});

console.log(nextState);
// { number: 2, dontChangeMe: 2 }

 

만약 produce 함수에 첫번째 파라미터를 생략하고 바로 업데이트 함수를 넣어준다면 어떻게 될까?

반환 값은 새로운 상태가 아니라 상태를 업데이트 해주는 함수!! 가 된다. -> 업데이트 함수로 만들어지게 됨. (값이 아니라!)

(두 개의 파라미터를 넣어주게 되면 상태를 불변성을 유지하면서 업데이트해주는 새로운 상태가 반환)

 

---

Reference

벨로퍼트의 모던 리액트