Immer는 JavaScript 애플리케이션에서 불변성을 유지하면서 상태를 간편하게 변경할 수 있게 해주는 라이브러리입니다. Immer.freeze는 Immer의 일부이며, 불변성을 확실히 유지하기 위해 객체를 동결(freeze)하는 데 사용됩니다. 이 두 가지 개념을 이해하기 위해 Immer와 Immer.freeze의 차이점에 대해 알아보겠습니다.

Immer

Immer는 변경할 수 있는 상태를 사용해 편리하게 불변성을 유지할 수 있는 방법입니다. 일반적으로, 상태 변경을 위해 새로운 객체를 생성하고 흩어진 코드를 작성해야 했지만, Immer를 사용하면 수정할 수 있는 상태를 직접 조작하는 것처럼 보이는 방식으로 코드를 작성할 수 있습니다.

Immer의 사용 예시는 다음과 같습니다.

import produce from 'immer';

const state = {
    todos: [
        { id: 1, text: 'Buy groceries', completed: false },
        { id: 2, text: 'Do laundry', completed: true }
    ]
};

const nextState = produce(state, draftState => {
    draftState.todos[0].completed = true;
});

위 코드에서 produce 함수는 변경 가능한 “state” 객체와 변경할 작업을 수행하는 콜백 함수를 인자로 받습니다. Immer는 콜백 함수 안에서 상태를 직접 수정하는 것처럼 동작합니다. 그러나 Immer는 내부적으로 상태 변경을 추적하고 기존 상태를 변경하지 않고 새로운 상태를 반환합니다.

Immer.freeze

Immer.freeze는 객체를 동결하는 데 사용됩니다. 객체를 동결하면 해당 객체의 속성이나 상태를 수정할 수 없게 되어, 객체가 불변성을 유지하게 됩니다.

Immer.freeze의 사용 예시는 다음과 같습니다.

import { freeze } from 'immer';

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

const frozenObj = freeze(obj);

frozenObj.age = 40; // TypeError: Cannot assign to read only property 'age' of object '#<Object>'

위 코드에서 알 수 있듯이, 동결된 객체인 frozenObj의 속성을 변경하려고 할 때, TypeError가 발생합니다. 이는 객체가 불변성을 유지하기 위해 동결되었다는 의미입니다.

따라서, Immer는 상태 변경을 편리하게 도와주는 반면 Immer.freeze는 불변성을 확실히 유지하기 위해 객체를 동결합니다. 두 개념을 적절히 활용하여 애플리케이션의 상태 관리를 개선할 수 있습니다.

#Immer #Immer.freeze