MobX는 React나 타입스크립트와 같은 프론트엔드 기술 스택에서 상태 관리를 위해 널리 사용되는 상태 관리 라이브러리입니다. MobX의 action 데코레이터를 사용하면 상태를 변경하는 동작을 정의할 수 있습니다. 이때 비동기 동작을 수행하는 경우, 타입 안전성을 확보하기 위해 프로미스 타입을 적절하게 다룰 필요가 있습니다.

MobX 비동기 액션 사용하기

MobX에서 비동기 동작을 수행하는 액션을 정의할 때는 runInAction 메서드를 이용하여 액션 내에서 상태를 변경해야 합니다. 예를 들면 다음과 같이 사용할 수 있습니다.

import { action, runInAction } from 'mobx';

class TodoStore {
  @action
  async fetchTodos() {
    const response = await fetch('https://example.com/api/todos');
    const data = await response.json();
    runInAction(() => {
      this.todos = data;
    });
  }
}

타입스크립트의 프로미스 타입 안정성 확보하기

액션 내에서 프로미스를 다룰 때, 타입스크립트는 기본적으로 Promise<any> 타입으로 추론됩니다. 하지만 이는 타입 안전성을 보장하지 못합니다. 따라서 프로미스의 반환 타입을 정확히 명시하여 타입 안정성을 확보해야 합니다.

import { action, runInAction } from 'mobx';

class TodoStore {
  todos: Todo[] = [];

  @action
  async fetchTodos(): Promise<void> {
    const response = await fetch('https://example.com/api/todos');
    const data = await response.json();
    runInAction(() => {
      this.todos = data;
    });
  }
}

위의 예제에서 fetchTodos 메서드의 반환 타입을 Promise<void>로 명시하여 액션의 실행 결과가 프로미스임을 명확히 표현했습니다. 이를 통해 타입스크립트는 해당 메서드가 프로미스를 반환하는 비동기 액션이라는 것을 이해할 수 있게 됩니다.

결론

MobX에서 비동기 액션을 다룰 때, runInAction 메서드를 사용하여 액션 내에서 상태를 변경해야 합니다. 이뿐만 아니라 타입스크립트의 타입 안정성을 위해 프로미스의 반환 타입을 명시하는 것이 중요합니다. 이를 통해 코드의 안정성을 확보할 수 있고, 더 나아가 프로미스를 다룰 때 발생하는 잠재적인 버그를 사전에 방지할 수 있습니다.

참고 자료: MobX 공식 문서, 타입스크립트 공식 문서