Immer를 사용하여 복잡한 로직을 간소화하기

27 Sep 2023

immer

복잡한 로직을 다루는 개발 작업을 수행하는 동안, 상태 관리와 불변성 유지는 중요한 과제입니다. 복잡한 상태 객체를 수정하고 업데이트하는 과정에서 발생하는 잠재적인 버그를 방지하기 위해 불변성을 유지해야 합니다. 이를 위해 Immer 라이브러리를 사용할 수 있습니다.

Immer란?

Immer는 JavaScript에서 불변성을 유지하는 작업을 간소화하는 라이브러리입니다. Immer는 불변성을 유지하면서 상태를 수정할 수 있는 기능을 제공하여 코드의 가독성을 높이고 성능을 향상시킵니다.

사용 방법

Immer를 사용하여 복잡한 로직을 간소화하는 방법은 다음과 같습니다.

immer 패키지 설치하기

Immer를 사용하기 위해 먼저 패키지를 설치해야 합니다. 아래 명령을 사용하여 NPM으로 패키지를 설치할 수 있습니다.
```
npm install immer
```
Immer를 상태 관리에 적용하기

Immer를 사용하여 상태를 관리하기 위해 다음과 같은 단계를 따릅니다.
```
import produce from 'immer';

// 수정하고자 하는 상태 객체
const state = {
  nestedObject: {
    value: 1,
  },
};

// 상태를 변경하는 불변성을 유지하는 함수
const newState = produce(state, draft => {
  draft.nestedObject.value += 1;
});

console.log(newState);
```
produce 함수는 첫 번째 인자로 수정하고자 하는 상태 객체를 받고, 두 번째 인자로 수정 작업을 수행하는 콜백 함수를 받습니다. 콜백 함수 내에서는 바뀔 수 있는 draft 객체를 사용하여 상태 값을 수정할 수 있습니다.

const newState = produce(state, draft => { ... }); 을 통해 새로운 상태 객체를 생성합니다. 이 때, Immer는 내부적으로 변경된 부분만 업데이트하고 나머지는 원래 상태를 참조하므로 성능상의 이점이 있습니다.

주의사항

Immer를 사용할 때 주의해야 할 몇 가지 사항들이 있습니다.

Immer는 순수 자바스크립트 객체에만 적용되며, 클래스 객체에는 적용되지 않습니다. 클래스 객체의 경우 수동으로 불변성을 유지해야 합니다.
Immer에서는 객체의 변경 여부를 감지하여 변경된 부분만 업데이트하는데, 이는 객체의 속성 값이 바뀌었는지를 판별하기 때문입니다. 객체 자체가 변하는 경우(예: 새로운 객체로 대체하는 경우)에는 적절한 업데이트가 이루어지지 않을 수 있으므로 주의해야 합니다.

결론

Immer를 사용하면 상태 관리 과정에서 발생할 수 있는 복잡성과 잠재적인 버그를 간소화할 수 있습니다. 불변성을 유지하면서 상태를 수정하고 업데이트하는 작업이 간단해지고 가독성이 향상됩니다. Immer는 코드 작성을 좀 더 효율적으로 만들어주며, 상태 관리에 대한 복잡성을 낮춰주는 강력한 도구입니다.

#Immer #JavaScript