MobX는 간단한 상태 관리를 위한 라이브러리로, 변화가 일어나면 자동으로 관련 컴포넌트를 갱신해줍니다. 타입스크립트와 MobX를 함께 사용하여 상태 변경 이벤트를 리스닝하는 방법을 알아보겠습니다.

1. MobX 설치

먼저, MobX를 설치해야 합니다. npm이나 yarn을 이용하여 설치할 수 있습니다.

npm install mobx mobx-react

2. MobX 상태 관리

MobX를 이용하여 관리할 상태를 만들고 필요한 처리를 구현합니다. 예를 들어, 다음과 같이 @observable 데코레이터를 사용하여 상태를 정의하고, @action 데코레이터를 사용하여 상태를 변경하는 메서드를 구현할 수 있습니다.

import { observable, action } from 'mobx';

class Store {
  @observable
  count: number = 0;

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

3. MobX 리액트 컴포넌트 구현

타입스크립트와 MobX를 함께 사용하는 경우, MobX 리액트 컴포넌트를 구현합니다. MobX 리액트의 @observer 데코레이터를 사용하여 상태 변경을 감지하고 자동으로 컴포넌트를 업데이트합니다.

import * as React from 'react';
import { observer } from 'mobx-react';
import { Store } from './Store'; // Store는 위에서 구현한 MobX 상태 관리 클래스

@observer
class Counter extends React.Component<{ store: Store }> {
  render() {
    const { store } = this.props;
    return (
      <div>
        <p>Count: {store.count}</p>
        <button onClick={() => store.increment()}>Increment</button>
      </div>
    );
  }
}

4. 상태 변경 이벤트 리스닝

MobX에서는 상태 변경 이벤트를 리스닝하는 기능을 제공하고 있지는 않습니다. 하지만, MobX의 when 함수와 autorun 함수를 이용하여 상태 변경 이벤트를 리스닝할 수 있습니다.

import { when, autorun } from 'mobx';

when(
  () => store.count > 5,
  () => {
    console.log('Count is greater than 5');
  }
);

autorun(() => {
  console.log('Count changed: ', store.count);
});

위의 예제에서는 when 함수를 사용하여 count가 5보다 큰 경우와 autorun 함수를 사용하여 count가 변경될 때마다 콘솔에 로그를 출력합니다.

결론

타입스크립트와 MobX를 함께 사용하여 상태 변경 이벤트를 리스닝하려면 MobX의 when 함수와 autorun 함수를 활용하여 상태 변경을 감지하고 필요한 처리를 수행할 수 있습니다.

참고 자료

• MobX 공식 문서
• 타입스크립트 공식 문서