React Immer 불변성 관리

 

React에서는 배열이나 객체를 직접적으로 수정하면 안되고
불변성을 지켜주면서 업데이트해 주어야 합니다.
오늘 소개해 드릴 내용은 불변성을 쉽게 관리하기 위해 만들어진 Immer 라이브러리입니다.

 

들어가기에 앞서 immer를 자주 사용하면 오히려 사용하지 않았을 때보다 속도가 더 느려진다고 합니다. 

개인적으로는 스프레드 연산자(...)를 활용하는 것을 추천합니다.

저는 react-redux에서만 사용합니다

 

 

기존 방식 (스프레드 연산자)

---

스프레드 연산자를 사용하면 아래와 같은 방식으로 데이터를 추가했었습니다.

const data = {
  a: 1,
  b: 2
};
const newData = {
  ...data,
  c: 3
};

// 혹은

const data = {
  a: 1,
  b: 2
};

let newData = data;
newData.c=3;
data={...newData}

 

 

Immer

---

설치

npm으로 immer를 설치해줍니다.

npm i immer

 

활용

immer는 주로 produce라는 이름을 사용합니다.

총 두개의 인자를 받고있습니다.

첫번째 . 수정하고싶은 기존의 데이터

두번째 . 어떤식으로 값을 변경할 것인지

import produce from 'immer';
.
.
.
const state = {
  a: 1,
  b: 2
};

const newState = produce(state, draft => {
  draft.a += 1;
});