상태 관리에 필수인 Immer에 대해 알아보기

27 Sep 2023

immer

Immer는 JavaScript와 TypeScript에서 상태 관리를 위한 불변성을 쉽게 유지하도록 도와주는 라이브러리입니다. 불변성은 상태 관리에서 중요한 개념이며, 변하지 않는 상태를 유지함으로써 예측 가능하고 안정적인 애플리케이션을 만들 수 있습니다.

왜 Immer를 사용해야 할까요?

일반적으로 JavaScript에서 객체나 배열을 업데이트하려면 기존 객체를 변경하는 방식으로 동작합니다. 그러나 이는 불변성을 유지하는 것에 어려움을 초래할 수 있습니다. 예를 들어, Redux와 같은 상태 관리 라이브러리를 사용하면 상태를 불변하게 유지하는 것이 중요합니다. 이때, Immer는 유효한 JavaScript 코드를 작성하면서도 불변성을 쉽게 유지할 수 있도록 도와줍니다.

Immer에서 제공하는 주요 기능

불변성 유지: Immer를 사용하면 기존 객체를 변경하지 않고도 새로운 상태를 생성할 수 있습니다. 이는 업데이트된 상태를 추적하고 이전 상태로 롤백할 수 있는 장점을 제공합니다.
불변성 업데이트: Immer는 immer 객체를 생성하고, 이 객체를 수정하면 기존 객체는 변경되지 않고 새로운 객체만 생성합니다. 이를 통해 불변성을 유지하는 동시에 상태 업데이트를 효과적으로 수행할 수 있습니다.
깊은 객체 업데이트: 객체의 깊은 단계까지 효과적으로 업데이트할 수 있습니다. Immer는 내부적으로 객체의 변경 사항을 지속적으로 추적하고, 변경된 부분만 새로운 객체로 생성합니다.

Immer 사용 예시

아래는 Immer를 사용한 예시입니다.

import produce from 'immer';

const state = {
  users: [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
  ],
};

const updateUserName = (state, userId, newName) => {
  return produce(state, (draft) => {
    const user = draft.users.find((user) => user.id === userId);
    if (user) {
      user.name = newName;
    }
  });
};

const updatedState = updateUserName(state, 1, 'Tom');

console.log(updatedState);

위의 예시에서는 produce 함수를 사용하여 불변성을 유지하면서 state 객체의 users 배열에서 id가 1인 사용자의 이름을 업데이트하고 있습니다. Immer를 사용하면 직관적이고 깔끔한 코드를 작성할 수 있으며, 상태 관리에서의 버그를 줄여줍니다.

결론

Immer는 불변성을 유지하면서 상태 관리를 간편하게 해주는 핵심 도구입니다. 이를 사용하면 코드의 가독성을 높이고 유지 보수성을 향상시킬 수 있습니다. Immer의 가장 큰 장점은 코드 작성을 간결하게 만들어주면서도 불변성을 유지하는 것입니다. 이러한 이유로 Immer는 상태 관리에 필수적인 라이브러리로 평가받고 있습니다.

#Immer #불변성 #상태관리