Immer는 불변성을 유지하는 상태 관리 라이브러리로, 프론트엔드 개발에서 많이 사용됩니다. 하지만 대규모 애플리케이션에서 상태가 복잡해질수록 Immer의 성능도 저하될 수 있습니다. 이번 블로그 포스트에서는 Immer의 성능을 최적화하는 방법에 대해 알아보겠습니다.

1. 불필요한 Proxy 사용 피하기

Immer는 내부적으로 Proxy를 사용하여 불변성을 유지합니다. 하지만 오버헤드가 발생할 수 있으며, 작은 단위의 변경도 많은 Proxy 객체를 생성하므로 성능 저하의 원인이 될 수 있습니다. 따라서 불필요한 Proxy 사용은 피해야 합니다.

// Bad
const nextState = produce(currentState, draftState => {
  draftState.someProp = 'updated value';
});

// Good
const nextState = produce(currentState, draftState => {
  draftState.someProp = 'updated value';
  return draftState; // Proxy 사용하지 않음
});

Immer로 생성한 변경 함수인 produce의 두 번째 인자는 변경할 상태를 수정하는 함수입니다. 이 함수가 끝나면 Immer는 변경된 상태를 비교하여 불필요한 Proxy를 제거합니다. produce 함수의 리턴값이 변경된 상태이므로, 이 값을 명시적으로 리턴함으로써 불필요한 Proxy 사용을 피할 수 있습니다.

2. immer 사용 범위 줄이기

Immer는 큰 범위의 상태 변경을 추적하기 위해 더 많은 Proxy 객체를 생성해야 할 수 있습니다. 따라서 immer를 사용하는 범위를 최소화하여 성능을 향상시킬 수 있습니다.

// Bad
const nextState = produce(currentState, draftState => {
  draftState.items[0].name = 'updated item';
});

// Good
const nextState = produce(currentState, draftState => {
  const updatedItem = { ...draftState.items[0] };
  updatedItem.name = 'updated item';
  draftState.items[0] = updatedItem;
});

Immer를 사용할 때는 최대한 작은 범위에만 적용하는 것이 좋습니다. 상태의 일부분만 변경할 경우에는 해당 부분만 수정하고 나머지 부분은 불변하게 유지하는 방법으로 성능을 향상시킬 수 있습니다.

결론

Immer는 불변성을 유지하는 상태 관리를 쉽게 만들어주는 라이브러리입니다. 하지만 대규모 애플리케이션에서는 성능 저하의 원인이 될 수 있으므로, 불필요한 Proxy 사용을 피하고 immer의 사용 범위를 최소화하는 것이 중요합니다. 상태의 변경이나 구조가 복잡해진다면, immer를 사용할 때 성능 최적화에 대해 고려해보는 것이 좋습니다.

#Immer #성능최적화