22.10.05

벨로퍼트 리액트 - 23. Immer를 사용한 더 쉬운 불변성 관리

 

불변성 관리

리액트에서 배열, 객체를 업데이트 할때는 직접 수정하는것이 아니라 불변성을 지켜주면서 업데이트를 해야한다. push, splice등의 함수를 사용하거나 n번째 항목을 직접 수정하는 것이 아니라 concat, filter , map 등 동작 후 새로운 배열을 만들어주는 함수를 사용해야 한다.

// 잘못된 예
const object = {
  a: 1,
  b: 2
};

object.b = 3;

// 바른 예
const object = {
  a: 1,
  b: 2
};

const nextObject = {
  ...object,
  b: 3
};

대부분의 경우 …(스프레드 연산자)또는 배열 내장함수를 사용하면 되지만 데이터의 구조가 복잡해질경우 불변성을 지키면서 새로운 데이터를 생성해내는 코드가 보기 어려워질 수 있다. 이럴 때에 Immer 를 사용하면 상태를 업데이트 할때 불변성을 신경쓰지 않으면서 업데이트를 해도 Immer가 관리를 대신 해준다.

 

Immer 사용법

1. Immer 설치
2. $ yarn add immer
3. Immer 불러오기
4. import produce from 'immer';

produce 함수를 사용할때는 첫번째 파라미터에 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트할지 정의하는 함수를 넣어준다. 두번째 파라미터에서 넣는 함수는 불변성에 대해 신경쓰지 않아도 된다.