MobX의 멀티스토어 패턴 이해하기

17 Oct 2023

mobx

MobX는 JavaScript 상태 관리 라이브러리로, React와 Angular와 함께 사용할 수 있으며 애플리케이션의 상태를 효과적으로 관리할 수 있습니다. MobX는 단일 상태 트리보다 더 복잡한 상태 관리 시나리오를 다루는 데 도움이 되는 멀티스토어 패턴을 제공합니다.

멀티스토어 패턴이란?

멀티스토어 패턴은 여러 개의 스토어를 사용하여 각 스토어의 독립적인 상태를 관리하는 방식입니다. 이 패턴은 애플리케이션의 복잡한 도메인 모델을 다룰 때 유용합니다. 각 스토어는 독립적으로 상태를 변경하고, 다른 스토어와의 데이터 연동을 통해 필요한 정보를 공유할 수 있습니다.

멀티스토어 구성하기

MobX에서 멀티스토어 패턴을 구현하려면 다음 단계를 따라야 합니다.

각 스토어를 개별적으로 생성합니다. 이는 MobX의 makeAutoObservable 또는 makeObservable 데코레이터를 사용해 간단히 설정할 수 있습니다.

예시 코드:

import { makeAutoObservable } from "mobx";

class UserStore {
   user = {};

   constructor() {
      makeAutoObservable(this);
   }

   setUser(user) {
      this.user = user;
   }
}

class TodoStore {
   todos = [];

   constructor() {
      makeAutoObservable(this);
   }

   addTodo(todo) {
      this.todos.push(todo);
   }
}

const userStore = new UserStore();
const todoStore = new TodoStore();

각 스토어를 필요한 컴포넌트에 주입합니다. 이는 React의 Context API를 사용하여 구현할 수 있습니다.

예시 코드:

import React from "react";

export const StoreContext = React.createContext({
   userStore: new UserStore(),
   todoStore: new TodoStore(),
});

export const useStores = () => React.useContext(StoreContext);

각 컴포넌트에서 필요한 스토어를 사용합니다. 필요한 스토어는 useStores를 사용하여 가져올 수 있습니다.

예시 코드:

import React from "react";
import { useStores } from "./store";

const HomePage = () => {
   const { userStore, todoStore } = useStores();

   return (
      <div>
         <h1>{userStore.user.name}</h1>
         <ul>
            {todoStore.todos.map(todo => (
               <li key={todo.id}>{todo.title}</li>
            ))}
         </ul>
      </div>
   );
}

결론

MobX의 멀티스토어 패턴을 사용하면 애플리케이션의 상태 관리를 효율적으로 처리할 수 있습니다. 각 스토어의 독립적인 상태를 관리하면서 필요한 정보를 공유하고, 복잡한 도메인 모델을 다룰 수 있습니다. MobX 멀티스토어 패턴은 개발자가 애플리케이션의 규모와 요구에 맞추어 유연하게 상태 관리를 할 수 있도록 도와줍니다.

참고 문서

#TechBlog #MobX #상태관리