[typescript] 타입스크립트와 MobX의 상태 관리에서의 비동기 처리 방식

21 Dec 2023

typescript

MobX는 React 애플리케이션에서 상태 관리를 위한 강력한 도구로 사용되고 있습니다. MobX의 상태 관리 시스템을 효율적으로 활용하기 위해서는 비동기 작업을 적절히 처리해야 합니다. 이번 글에서는 타입스크립트와 MobX에서의 비동기 처리 방식에 대해 알아보겠습니다.

1. MobX와 비동기 작업

MobX에서 비동기 작업을 처리하는 가장 일반적인 방법은 async/await를 사용하는 것입니다. async/await를 사용하여 비동기 작업을 수행하면 코드가 더 읽기 쉽고 유지보수가 용이해집니다.

import { observable, action, runInAction } from 'mobx';

class TodoStore {
  @observable todos = [];

  @action
  async fetchTodos() {
    try {
      const response = await fetch('/api/todos');
      const data = await response.json();
      runInAction(() => {
        this.todos = data;
      });
    } catch (error) {
      console.error('Error fetching todos', error);
    }
  }
}

위 예제에서 fetchTodos 메서드는 async/await를 사용하여 todos를 가져오는 비동기 작업을 수행하고, runInAction을 사용하여 상태를 변경합니다.

2. 타입스크립트와 함께 MobX 사용하기

타입스크립트와 MobX를 함께 사용하면 코드의 안정성을 높일 수 있습니다. MobX에서의 비동기 작업을 처리할 때에도 타입스크립트의 장점을 살릴 수 있습니다.

import { observable, action, runInAction } from 'mobx';
import { makeAutoObservable } from 'mobx';

class TodoStore {
  todos = [];

  constructor() {
    makeAutoObservable(this);
  }

  async fetchTodos() {
    try {
      const response = await fetch('/api/todos');
      const data = await response.json();
      runInAction(() => {
        this.todos = data;
      });
    } catch (error) {
      console.error('Error fetching todos', error);
    }
  }
}

위 예제는 makeAutoObservable을 사용하여 MobX 스토어의 관찰 가능한 속성으로 만들었습니다. 이렇게 함으로써 타입스크립트에서 MobX의 관찰 가능한 속성을 쉽게 사용할 수 있습니다.

3. 결론

타입스크립트와 MobX를 함께 사용하여 비동기 작업을 처리하는 방법에 대해 알아보았습니다. async/await와 runInAction을 활용하여 MobX에서의 비동기 작업을 효율적으로 처리할 수 있으며, 타입스크립트와의 통합을 통해 코드의 안정성을 높일 수 있습니다. 이러한 방법들을 적절히 활용하여 안정적이고 성능 좋은 React 애플리케이션을 개발할 수 있습니다.

참고 문헌: MobX 공식 문서