[typescript] 타입스크립트와 MobX를 함께 사용하여 상태 공유 및 전파를 간편하게 하는 방법

21 Dec 2023

typescript

MobX는 상태 관리 라이브러리로, 관찰 가능한 상태를 자동으로 감지하고 업데이트하는 기능을 제공합니다. 이를 통해 복잡한 상태 관리를 단순화할 수 있습니다. 또한 타입스크립트의 강력한 정적 타입 지원과 결합하면 유지보수성과 안정성을 보장할 수 있습니다.

이번 포스트에서는 타입스크립트와 MobX를 함께 사용하여 간단한 예제를 통해 상태 공유와 전파를 어떻게 하는지에 대해 살펴보겠습니다:

1. MobX 설치 및 설정

먼저, 프로젝트에 MobX를 설치합니다.

npm install mobx mobx-react

그리고 타입스크립트에서 MobX를 사용하기 위해 mobx-react-lite 라이브러리를 설치합니다.

npm install mobx-react-lite

2. MobX 스토어 생성

MobX 스토어는 애플리케이션의 상태를 보유하고 비즈니스 로직을 포함하는 곳입니다. 다음은 간단한 스토어 예제입니다.

import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();
export default counterStore;

3. MobX 스토어 사용

MobX 스토어를 사용하여 컴포넌트 간에 상태를 전파할 수 있습니다. 예를 들어, React 함수 컴포넌트에서 MobX 스토어를 사용하는 방법은 다음과 같습니다.

import React from "react";
import { observer } from "mobx-react-lite";
import counterStore from "./counterStore";

const CounterComponent: React.FC = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={counterStore.increment}>Increment</button>
      <button onClick={counterStore.decrement}>Decrement</button>
    </div>
  );
});

export default CounterComponent;

4. MobX 스토어 제공 및 사용

마지막으로, MobX 스토어를 애플리케이션에 제공하고 사용하는 방법입니다.

import React from "react";
import CounterComponent from "./CounterComponent";
import counterStore from "./counterStore";
import { Provider } from "mobx-react-lite";

const App: React.FC = () => {
  return (
    <Provider counterStore={counterStore}>
      <CounterComponent />
    </Provider>
  );
};

export default App;

결론

타입스크립트와 MobX를 함께 사용하면, 간단하고 강력한 상태 관리를 구현할 수 있습니다. MobX의 반응형 및 자동화된 업데이트 기능과 타입스크립트의 정적 타입 검사와의 결합으로 안정성과 유지보수성을 보장할 수 있습니다.

위의 예제를 참고하여 프로젝트에 MobX를 도입해보세요. 기존의 상태 관리 방식과 비교하여 생산성 및 코드의 간결성을 경험해보실 수 있을 것입니다.