[React] Immer를 사용한 불변성 지키기

 

immer를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성 유지를 해줍니다.

우리는 보통 배열을 변경할 때 합칠때는 concat, 찾거나 뺄 때는 filter, 리스트를 뿌릴 때는 map을 사용하여 불변성을 지켜주면서 배열을 수정합니다.

허나 immer를 사용하면, push나 직접적인 값 설정이 가능해집니다.

 

먼저 immer를 설치해줍니다.

$yarn add immer 또는 $npm i immer

 

그리고 상단에 

import produce from "immer";

를 작성해주고 immer로 사용해도 되지만, 보통 produce로 많이 사용합니다.  

 

produce 함수를 사용 할 때에는 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어줍니다.

두번째 파라미터에 넣는 함수에서는 불변성에 대해서 신경쓰지 않고 그냥 업데이트 해주면 다 알아서 해줍니다.

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

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

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

 

이런 것도 사용해 볼 수 있겠네요.

const array = [
  { id: 1, text: 'hello'},
  { id: 2, text: 'bye'},
  { id: 3, text: 'lalala'}
]

const nextArray = produce(array, draft => {
  draft.push({id:4, text: 'blabla'});
  draft[0].text = draft[0].text + 'world';
})

nextArray;
=> (4) [{…}, {…}, {…}, {…}]
0: {id: 1, text: "helloworld"}
1: {id: 2, text: "bye"}
2: {id: 3, text: "lalala"}
3: {id: 4, text: "blabla"}
length: 4
__proto__: Array(0)

array;
=>(3) [{…}, {…}, {…}]
0: {id: 1, text: "hello"}
1: {id: 2, text: "bye"}
2: {id: 3, text: "lalala"}
length: 3
__proto__: Array(0)

 

보시면 array는 건들지 않고, nextArray로 새로 만들어 사용한 것을 확인할 수 있습니다.