Colin's Blog
[typescript] MobX 리액트 컴포넌트와 타입스크립트의 연동 방법

MobX는 상태 관리 라이브러리로서, 리액트 애플리케이션의 상태를 효율적으로 관리할 수 있게 도와줍니다. 타입스크립트와 함께 MobX를 사용하면, 더욱 강력한 타입 안정성을 확보할 수 있습니다. 이번 블로그에서는 MobX를 타입스크립트와 함께 사용하는 방법에 대해 알아보겠습니다.

MobX 및 타입스크립트 설치

먼저, MobX와 타입스크립트를 설치해야 합니다. 프로젝트 디렉토리에서 아래 명령어로 MobX와 관련 패키지들을 설치합니다.

npm install mobx mobx-react mobx-react-lite

또한 타입스크립트와 MobX 라이브러리를 연동하기 위해, mobx-react-lite 패키지와 함께 @types/mobx-react-lite 패키지도 설치해야 합니다.

npm install --save-dev @types/mobx-react-lite

MobX 리액트 컴포넌트 생성

MobX를 사용하여 상태를 관리하는 리액트 컴포넌트를 생성합니다. 예를 들어, 다음과 같이 CounterStore 클래스를 만들고, 해당 클래스의 인스턴스를 사용하는 리액트 컴포넌트를 생성합니다.

import { makeObservable, observable, action } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
    });
  }

  increment() {
    this.count++;
  }

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

const counterStore = new CounterStore();

MobX와 타입스크립트 연동

MobX와 타입스크립트를 연동하려면 observer 데코레이터를 사용하여 MobX에서 관리되는 상태를 감시하는 리액트 컴포넌트를 정의해야 합니다.

import { observer } from "mobx-react-lite";

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

위의 예제에서 observer 데코레이터는 CounterComponent를 MobX 스토어와 연결시킵니다.

타입 안정성 보장

타입스크립트와 함께 MobX를 사용하면, observable 값, action 및 computed와 같은 MobX 기능을 분명하게 타입화할 수 있습니다. 따라서 자동완성 및 타입 안정성이 확보됩니다.

마무리

이번 포스트에서는 MobX를 타입스크립트와 함께 사용하는 방법에 대해 알아보았습니다. MobX를 활용하여 상태를 관리하는 데 있어 타입스크립트를 이용하면 더욱 강력한 타입 안정성을 확보할 수 있습니다.

참고문헌:

© 2018 Colin. All rights reserved.