MobX 스토어 분할 및 모듈화 전략

17 Oct 2023

mobx

MobX는 상태 관리 라이브러리로, 복잡한 애플리케이션의 상태를 쉽게 관리할 수 있게 도와줍니다. 대규모 프로젝트에서는 MobX 스토어의 분할과 모듈화가 중요한 전략입니다. 이번 글에서는 MobX 스토어를 분할하고 모듈화하는 방법에 대해 알아보겠습니다.

1. 기능별로 스토어 분할하기

애플리케이션의 기능을 구분하여 스토어를 분할하는 것이 좋습니다. 예를 들어, 사용자 관리와 상품 관리라는 두 가지 주요 기능을 가진 애플리케이션이 있다고 가정합시다. 이 경우, 사용자 관리와 상품 관리를 각각 별도의 스토어로 구현하는 것이 좋습니다.

// UserStore.js
import { observable, action } from 'mobx';

class UserStore {
  @observable users = [];

  @action addUser(user) {
    this.users.push(user);
  }
}

export default new UserStore();

// ProductStore.js
import { observable, action } from 'mobx';

class ProductStore {
  @observable products = [];

  @action addProduct(product) {
    this.products.push(product);
  }
}

export default new ProductStore();

분할된 스토어는 각각의 기능을 독립적으로 관리할 수 있게 해줍니다. 이렇게 하면 코드의 유지보수와 확장성이 향상됩니다.

2. 스토어 모듈화하기

분할된 스토어를 모듈화하여 재사용성을 높이는 것도 중요합니다. 기능별로 분리된 스토어를 필요에 따라 재조합하여 새로운 기능을 가진 스토어를 만들 수 있습니다.

// UserStore.js
import { observable, action } from 'mobx';

class UserStore {
  @observable users = [];

  @action addUser(user) {
    this.users.push(user);
  }
}

export default new UserStore();

// ProductStore.js
import { observable, action } from 'mobx';

class ProductStore {
  @observable products = [];

  @action addProduct(product) {
    this.products.push(product);
  }
}

export default new ProductStore();

// OrderStore.js
import { observable, action } from 'mobx';
import UserStore from './UserStore';
import ProductStore from './ProductStore';

class OrderStore {
  @observable orders = [];

  @action createOrder(userId, productId) {
    const user = UserStore.users.find(user => user.id === userId);
    const product = ProductStore.products.find(product => product.id === productId);
    const order = {
      user,
      product,
    };
    this.orders.push(order);
  }
}

export default new OrderStore();

위의 예시에서는 OrderStore에서 UserStore와 ProductStore를 필요에 따라 가져와 사용하는 모습을 볼 수 있습니다. 이렇게 하면 다른 모듈에서도 분할된 스토어를 재사용할 수 있으며, 코드의 중복을 피할 수 있습니다.

3. 스토어 간 커뮤니케이션

스토어 간에 상호작용이 필요한 경우, MobX의 트랜잭션을 사용하여 데이터를 안전하게 업데이트할 수 있습니다.

// UserStore.js
import { observable, action } from 'mobx';

class UserStore {
  @observable users = [];

  @action addUser(user) {
    this.users.push(user);
  }
}

export default new UserStore();

// ProductStore.js
import { observable, action, runInAction} from 'mobx';
import UserStore from './UserStore';

class ProductStore {
  @observable products = [];

  @action addProduct(product) {
    this.products.push(product);
    
    // UserStore에 사용자 추가
    runInAction(() => {
      UserStore.addUser(product.user);
    });
  }
}

export default new ProductStore();

위의 예시에서 ProductStore의 addProduct 액션에서 UserStore에도 동시에 사용자를 추가하는 상황을 가정해보았습니다. 이때, runInAction을 이용하여 트랜잭션을 생성하고, 데이터 업데이트를 안전하게 관리할 수 있습니다.

모듈화된 스토어로 애플리케이션을 구조화하는 것은 MobX를 사용하는 프로젝트에서 중요한 전략입니다. 스토어를 기능별로 분할하고 필요에 따라 재사용하며, 효율적인 상태 관리를 할 수 있습니다.