Immer의 immerable 타입 활용 방법 알아보기

Immer는 JavaScript에서 불변성을 관리하기 위한 라이브러리입니다. immerable은 Immer에서 제공하는 특별한 타입으로, 객체가 immerable을 구현하면 Immer가 내부적으로 변화를 추적하고 불변성을 유지할 수 있게 됩니다. 이번 블로그 포스트에서는 immerable 타입을 활용하는 방법에 대해 알아보겠습니다.

immerable 타입 구현하기

immerable 타입을 활용하기 위해서는 객체가 immerable 심볼을 포함한 Symbol을 구현해야 합니다. 이 심볼은 객체가 immerable임을 나타내는 역할을 합니다. 객체에 immerable 심볼을 추가하기 위해 다음과 같은 코드를 작성할 수 있습니다.

import { produce, immerable } from 'immer';

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this[immerable] = true; // immerable 심볼 추가
  }
}

위의 코드에서는 Person 클래스가 immerable을 구현하고 있습니다. this[immerable] = true를 통해 객체의 immerable 심볼을 true로 설정해주었습니다.

immerable 타입 사용하기

immerable 타입을 사용하여 불변성을 관리하는 예제를 살펴보겠습니다. 아래의 코드는 Person 클래스의 인스턴스를 생성하고 이름을 변경하는 예제입니다.

import { produce } from 'immer';

const person = new Person('John', 30);

const updatedPerson = produce(person, draft => {
  draft.name = 'Mike';
});

console.log(updatedPerson.name); // 출력 결과: Mike
console.log(person.name); // 출력 결과: John

위의 코드에서는 produce 함수를 사용하여 불변성을 관리합니다. produce 함수는 첫 번째 매개변수로 수정하고자 하는 객체(person)를 전달하고, 두 번째 매개변수로 변경 작업을 수행하는 함수를 전달합니다. 변경 작업은 draft라는 임시 객체를 통해 이루어집니다. 이후 draft에 수행한 변경 작업이 실제 객체(person)에 적용되고 변경된 객체(updatedPerson)를 반환합니다.

위의 예제에서는 draft.name = 'Mike'를 통해 person 객체의 이름을 변경하였습니다. 변경된 결과는 updatedPerson에 저장되고, person 객체는 여전히 원래의 값을 유지합니다.

결론

Immer의 immerable 타입은 객체의 불변성을 관리하기 위한 유용한 기능입니다. immerable을 구현하고 produce 함수를 활용하면 쉽게 불변성을 유지하고 객체를 업데이트할 수 있습니다. immerable을 활용하여 코드를 작성하면 복잡한 불변성 로직을 간결하게 표현할 수 있습니다.

#Immer #immerable #불변성관리