Immer는 JavaScript에서 상태 불변성을 간단하게 유지하도록 도와주는 라이브러리입니다. Immer를 사용하면 불변성을 유지하는 작업을 보다 간단하고 명료하게 처리할 수 있습니다.

Immer의 장점

1. 코드의 가독성을 향상시킵니다. 다양한 불변성 처리 로직을 간결하게 표현할 수 있습니다.
2. 불변성 관련 버그를 방지하고 디버깅을 용이하게 해줍니다.
3. 복잡한 상태 관리 코드를 단순화하여 유지/보수가 용이하게 합니다.

Immer 사용법

1. 설치하기

먼저, Immer를 프로젝트에 설치해야 합니다. npm 혹은 yarn을 사용하여 설치할 수 있습니다.

npm install immer

또는

yarn add immer

2. 상태 업데이트하기

Immer를 사용해 상태를 업데이트하려면 produce() 함수를 사용합니다. 이 함수는 현재 상태(state)와 상태를 업데이트할 로직을 전달받아 새로운 상태를 반환합니다.

import { produce } from 'immer';

const state = { count: 0 };

const newState = produce(state, (draftState) => {
  draftState.count += 1;
});

console.log(newState); // { count: 1 }

3. 중첩된 객체 또는 배열 업데이트하기

Immer를 사용하면 중첩된 객체 또는 배열을 간편하게 업데이트할 수 있습니다. 이 경우, 해당 객체나 배열에 접근하여 변경 작업을 수행하면 됩니다.

import { produce } from 'immer';

const state = {
  user: {
    name: 'John',
    age: 30,
  },
};

const newState = produce(state, (draftState) => {
  draftState.user.age += 1;
});

console.log(newState); // { user: { name: 'John', age: 31 } }

4. 불변성 확인하기

Immer는 내부적으로 불변성을 확인하여 변경 작업이 제대로 이루어 졌는지 검사합니다. 변경하려는 값을 바로 쓰는 것이 아니라, 실제로 변경 여부를 확인하는 방식을 사용합니다.

import { produce } from 'immer';

const state = { count: 0 };

produce(state, (draftState) => {
  console.log(draftState === state); // false
});

console.log(state === newState); // false

#Immer #불변성-유지하기

Immer를 활용하면 복잡한 불변성 관리 코드를 간단하고 명료하게 작성할 수 있습니다. 손쉬운 상태 업데이트와 가독성 있는 코드 작성을 통해 개발 효율성을 향상시킬 수 있습니다. Immer를 사용하여 상태 관리를 할 때, 상태 불변성을 유지하는 것은 중요한 요소 중 하나라는 것을 기억해주세요.