[typescript] 타입스크립트와 MobX의 상태 관리에서의 중앙 집중식 상태 저장소 구현 방법

21 Dec 2023

typescript

이번 포스트에서는 타입스크립트와 MobX를 사용하여 중앙 집중식 상태 저장소를 구현하는 방법에 대해 살펴보겠습니다.

MobX란

MobX는 상태 관리 라이브러리로, React나 Angular와 같은 프레임워크와 함께 사용되어 복잡한 상태 관리를 쉽게 처리할 수 있게 해줍니다. MobX는 반응형으로 상태를 관리하며, 상태의 변화를 감지하고 자동으로 UI를 업데이트할 수 있습니다.

중앙 집중식 상태 저장소

중앙 집중식 상태 저장소는 애플리케이션의 상태를 한 곳에 모아두는 방식으로, 상태의 일관성을 유지하고 관리하기 쉽게 해줍니다. 이를 통해 상태 관리가 용이해지며, 상태의 변화를 예측 가능하게 만들어줍니다.

타입스크립트와 MobX를 활용한 중앙 집중식 상태 저장소 구현

import { makeObservable, observable, action, runInAction } from 'mobx';

class CentralStore {
  @observable
  counter = 0;

  constructor() {
    makeObservable(this);
  }

  @action
  increaseCounter() {
    this.counter++;
  }

  @action
  async increaseCounterAsync() {
    await someAsyncOperation();
    runInAction(() => {
      this.counter++;
    });
  }
}

const centralStore = new CentralStore();
export default centralStore;

위의 예제 코드에서는 MobX의 @observable 및 @action 데코레이터를 사용하여 CentralStore 클래스를 정의하고, 중앙 집중식 상태 저장소를 구현하였습니다.

마치며

이렇게 타입스크립트와 MobX를 활용하여 중앙 집중식 상태 저장소를 구현하는 방법에 대해 알아보았습니다. 이를 통해 복잡한 상태 관리를 보다 간편하게 처리할 수 있게 되며, 애플리케이션의 상태를 효율적으로 관리할 수 있습니다.

내용에 대한 더 자세한 설명은 MobX 공식 문서를 참고하시기를 권장드립니다.

참고 자료

MobX 공식 문서: https://mobx.js.org/README.html