데이터의 불변성을 유지하는 것은 JavaScript 개발에서 중요한 부분입니다. 이를 위해 Immer 라이브러리를 사용할 수 있습니다. Immer는 JavaScript의 불변성을 유지하기 위한 편리하고 강력한 도구입니다. 이제 Immer와 immer.set 함수를 활용하는 방법에 대해 알아보겠습니다.

Immer 라이브러리 설치

먼저, Immer를 사용하기 위해 프로젝트에 Immer를 설치해야 합니다. npm을 통해 다음과 같이 설치할 수 있습니다.

npm install immer

immer.set 함수의 활용

immer.set 함수는 Immer 라이브러리에서 제공하는 중요한 함수 중 하나입니다. 이 함수를 사용하면 쉽게 불변성을 유지하면서 데이터를 수정할 수 있습니다.

객체의 속성 변경

먼저, 객체의 속성을 변경하는 예시를 살펴보겠습니다. 다음은 Immer와 immer.set 함수를 사용하여 객체의 속성을 변경하는 코드입니다.

import produce, { immer.set } from 'immer';

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

const newState = produce(originalState, draftState => {
  immer.set(draftState, 'name', 'Jane');
});

console.log(newState); // { name: 'Jane', age: 30 }

immer.set 함수는 첫 번째 인자로 변경하고자 하는 객체(draft 객체)를 받고, 두 번째 인자로 변경할 속성의 키와 값을 받습니다. 이렇게 하면 해당 객체의 속성이 변경된 불변성을 유지하는 새로운 객체가 반환됩니다.

배열의 요소 변경

immer.set 함수는 배열의 요소 변경에도 사용할 수 있습니다. 다음은 배열의 요소를 변경하는 예시입니다.

import produce, { immer.set } from 'immer';

const originalState = [1, 2, 3];

const newState = produce(originalState, draftState => {
  immer.set(draftState, 0, 10);
});

console.log(newState); // [10, 2, 3]

위의 예제에서는 배열의 첫 번째 요소를 10으로 변경하였습니다. immer.set 함수를 사용하여 불변성을 유지하면서 배열에서 요소를 변경할 수 있습니다.

결론

Immer는 JavaScript에서 불변성을 유지하기 위한 강력한 도구입니다. immer.set 함수를 사용하면 데이터의 불변성을 유지하면서 쉽게 객체나 배열의 속성을 변경할 수 있습니다. 이를 통해 코드의 가독성을 높일 수 있고 에러가 발생할 확률을 줄일 수 있습니다. Immer를 활용하여 JavaScript 개발을 효율적으로 진행해 보세요!

#Immer #불변성