Immer(임머)는 JavaScript의 불변성(Immutability)을 다루기 위한 라이브러리입니다. 이 라이브러리는 불변성을 유지하는 작업을 간편하게 할 수 있도록 도와줍니다. Immer는 내부적으로 structural sharing이라는 개념을 사용하여 성능을 향상시킵니다.

Structural Sharing

Structural sharing은 불변성을 유지하는 동시에 메모리를 효율적으로 사용할 수 있는 기술입니다. 이 개념은 간단히 말해, 변경된 데이터 구조와 원본 데이터 구조 사이에서 공유되는 부분이 있다면, 새로운 데이터 구조를 생성하지 않고 기존의 구조를 재사용하는 것입니다.

내부 동작 과정

Immer는 draft state와 base state라는 개념을 사용하여 내부 작업을 관리합니다. draft state는 변경할 수 있는 가상의 상태로, 이곳에서 데이터를 수정하고 변환합니다. 그리고 base state는 실제 데이터가 있는 원본 상태입니다.

일반적으로 Immer를 사용하는 방법은 다음과 같습니다.

import produce from 'immer';

const baseState = {
  name: "Alice",
  age: 30
};

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

1. produce 함수는 두 개의 인자를 받습니다. 첫 번째 인자는 base state이고, 두 번째 인자는 draft state를 조작하는 함수입니다.
2. produce 함수는 먼저 base state를 clone하여 draft state로 만듭니다.
3. draft state를 조작하는 함수 안에서 필요한 변경 작업을 수행합니다.
4. 변경 작업이 끝나면, produce 함수는 변경된 draft state를 반환합니다. 이때, draft state와 base state 사이에는 structural sharing이 적용될 수 있습니다.

Immer는 변경 작업이 이루어지는 동안 draft state의 구조만 추적하고, 실제 데이터의 구조는 변경하지 않습니다. 이를 통해 성능 향상과 메모리 사용량을 최소화할 수 있습니다.

요약

Immer는 불변성을 유지하는 작업을 간편하게 해주는 라이브러리입니다. 내부적으로 structural sharing을 사용하여 성능을 향상시키며, draft state와 base state 개념을 활용하여 작업을 관리합니다. 이를 통해 변경 작업이 적용된 draft state를 반환하고, 메모리를 효율적으로 사용할 수 있습니다.

#Immer #불변성 #JavaScript