[typescript] 타입스크립트와 MobX를 함께 사용하여 상태를 간편하게 관리하는 방법

21 Dec 2023

typescript

MobX는 상태 관리 라이브러리로, React 및 다른 JavaScript 프레임워크와 함께 사용할 수 있습니다. MobX를 타입스크립트와 함께 사용하면 상태 관리를 보다 간편하게 할 수 있습니다. 이번 포스트에서는 타입스크립트와 MobX를 함께 사용하여 상태를 관리하는 방법을 살펴보겠습니다.

MobX란?

MobX는 응용프로그램 상태를 관리하기 위한 상태 관리 라이브러리입니다. MobX를 사용하면 응용프로그램의 상태 변경에 따른 반응을 쉽게 구현할 수 있습니다.

타입스크립트와 MobX 사용하기

타입스크립트를 사용하여 MobX를 세팅하고 상태를 관리하는 방법을 살펴보겠습니다.

1. 프로젝트에 MobX 및 관련 라이브러리 설치하기

먼저 프로젝트에 MobX 및 관련 라이브러리를 설치합니다.

npm install mobx mobx-react

2. MobX 스토어 생성하기

다음으로 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 컴포넌트에서 상태를 관리할 수 있습니다.

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

const CounterComponent: React.FC = observer(() => {
  const { count, increment, decrement } = counterStore;

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
});

export default CounterComponent;

마치며

타입스크립트와 MobX를 함께 사용하여 상태를 관리하는 방법에 대해 알아봤습니다. MobX를 사용하면 상태 변화에 따른 자동 업데이트를 구현할 수 있고, 타입스크립트를 활용하여 타입 안정성을 확보할 수 있습니다. 이를 통해 응용프로그램의 상태를 효율적으로 관리할 수 있습니다.

참고 자료: MobX 공식 문서