[typescript] MobX와 타입스크립트를 연동하여 상태 관리를 용이하게 하는 방법

21 Dec 2023

typescript

MobX는 React 애플리케이션의 상태 관리를 도와주는 라이브러리로, 타입스크립트와 함께 사용하면 코드를 더 안정적으로 유지할 수 있습니다. 이번 포스트에서는 MobX를 타입스크립트와 함께 사용하는 방법에 대해 알아보겠습니다.

MobX 및 타입스크립트 설치

먼저 프로젝트에 MobX와 타입스크립트를 설치해야합니다. 이를 위해 다음 명령어를 사용합니다.

npm install mobx mobx-react mobx-react-lite mobx-utils mobx-react-lite
npm install typescript @types/react @types/react-dom @types/mobx @types/mobx-react-lite

MobX 리액트 애플리케이션에서 사용하기

MobX를 사용하여 간단한 카운터 애플리케이션을 만들어보겠습니다.

import { observable, action, makeObservable } from 'mobx';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increase: action,
      decrease: action,
    });
  }

  increase() {
    this.count++;
  }

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

const counterStore = new CounterStore();

const CounterComponent: React.FC = observer(() => {
  return (
    <div>
      <h1>Count: {counterStore.count}</h1>
      <button onClick={() => counterStore.increase()}>Increase</button>
      <button onClick={() => counterStore.decrease()}>Decrease</button>
    </div>
  );
});

결론

MobX와 타입스크립트를 함께 사용하면 상태 관리 및 애플리케이션의 유지 보수가 용이해집니다. MobX를 타입스크립트와 함께 사용하여 더 안정적이고 확장 가능한 애플리케이션을 만들 수 있습니다.

더 많은 정보를 원하시면 MobX와 타입스크립트의 공식 문서를 참고하시기 바랍니다.

참고 문헌: