이 글에서는 Immer와 MobX를 함께 사용하여 상태 관리하는 방법에 대해 알아보겠습니다.

Immer란?

Immer는 불변성을 유지하면서도 간편하게 상태를 업데이트할 수 있는 라이브러리입니다. 보통 Redux와 함께 사용되지만 MobX와도 함께 사용할 수 있습니다.

MobX란?

MobX는 반응적인 반응형 상태 관리 라이브러리입니다. MobX를 사용하면 상태가 변경될 때 자동으로 관련된 컴포넌트들이 업데이트되는 편리한 기능을 제공합니다.

Immer와 MobX 함께 사용하기

Immer와 MobX를 함께 사용하기 위해서는 MobX의 observable을 사용하여 관리할 상태를 정의하고, Immer의 produce 함수를 사용하여 해당 상태를 업데이트해야 합니다. 아래는 간단한 예제 코드입니다.

import { observable } from 'mobx';
import produce from 'immer';

// observable로 상태 정의
const todoStore = observable({
  todos: []
});

// 상태 업데이트 함수
const updateTodo = (newTodo) => {
  todoStore.todos = produce(todoStore.todos, draft => {
    draft.push(newTodo);
  });
};

// 사용 예시
updateTodo('Buy groceries');
console.log(todoStore.todos); // ['Buy groceries']

위 예제에서는 todoStore라는 상태 객체를 observable로 정의하고, updateTodo 함수를 통해 todos 배열을 업데이트하고 있습니다. produce 함수를 사용하여 Immer의 불변성을 유지하면서 todos 배열을 수정할 수 있습니다.

결론

Immer와 MobX를 함께 사용하면 불변성을 유지하면서도 간단하게 상태를 업데이트할 수 있습니다. 이를 통해 프로젝트의 상태 관리를 더욱 효율적으로 처리할 수 있을 것입니다.

#Immer #MobX