TypeScript와 MobX를 함께 사용하는 방법

17 Oct 2023

mobx

이번 포스트에서는 TypeScript와 MobX를 함께 사용하는 방법에 대해 알아보겠습니다. TypeScript는 정적 타입 시스템을 갖춘 JavaScript의 상위 집합 언어이며, MobX는 상태 관리 라이브러리입니다. TypeScript와 MobX를 함께 사용하면 코드의 가독성과 유지 보수성을 향상시키는 동시에, 개발 시간을 단축시킬 수 있습니다.

1. TypeScript 프로젝트 설정

먼저 TypeScript 프로젝트를 설정해야 합니다. TypeScript 프로젝트를 생성하려면 다음 명령어를 실행하세요:

$ npm init
$ npm install --save-dev typescript

프로젝트 루트 경로에 tsconfig.json 파일을 생성하고, 다음과 같이 설정하세요:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

2. MobX 설치 및 설정

이제 MobX를 설치하고 설정해야 합니다. 다음 명령어를 실행하여 MobX를 설치하세요:

$ npm install --save mobx mobx-react

설치가 완료되면, MobX를 사용할 파일 상단에 다음과 같이 import문을 추가하세요:

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

3. MobX 상태 관리

MobX는 @observable 데코레이터를 사용하여 상태를 관리합니다. 상태를 가진 모델 클래스를 만들고, 각 상태를 @observable로 선언하세요. 이렇게 하면 MobX가 상태 변경을 자동으로 추적합니다.

class CounterStore {
  @observable count = 0;

  @action increment() {
    this.count++;
  }

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

const counterStore = new CounterStore();

4. MobX와 React 연동

마지막으로 MobX와 React를 연동해야 합니다. @observer 데코레이터를 사용하여 React 컴포넌트를 MobX와 연결하세요. 이렇게 하면 MobX 상태가 변경될 때마다 컴포넌트가 자동으로 업데이트됩니다.

import React from 'react';
import { observer } from 'mobx-react';

interface CounterProps {
  counterStore: CounterStore;
}

@observer
class Counter extends React.Component<CounterProps> {
  render() {
    const { counterStore } = this.props;

    return (
      <div>
        <span>Count: {counterStore.count}</span>
        <button onClick={() => counterStore.increment()}>+</button>
        <button onClick={() => counterStore.decrement()}>-</button>
      </div>
    );
  }
}

export default Counter;

이제 MobX와 TypeScript를 함께 사용하는 방법을 알게 되었습니다. TypeScript를 사용하면 정적 타입 검사를 통해 버그를 사전에 방지하고, MobX를 사용하면 상태 관리를 간편하게 할 수 있습니다. 함께 사용하면 더욱 효율적이고 안정적인 개발을 할 수 있습니다.

참고 자료: