MobX를 활용한 비동기 상태 관리 패턴

17 Oct 2023

mobx

비동기 상태 관리는 현대 웹 애플리케이션에서 매우 중요한 요소입니다. 이때 MobX는 쉽고 간결한 비동기 상태 관리 패턴을 제공하는 도구로서 많은 개발자들에게 인기가 있습니다. 이번 블로그 포스트에서는 MobX를 활용한 비동기 상태 관리 패턴에 대해 알아보겠습니다.

MobX란?

MobX는 상태 관리 라이브러리로써, 리액트 애플리케이션에서 상태에 대한 관리와 반응형 동작을 쉽게 구현할 수 있도록 도와줍니다. MobX는 단방향 데이터 플로우를 따른 리액트에서의 상태 관리를 간편화시켜줍니다.

관찰 가능한 상태 (Observable State)

MobX에서는 관찰 가능한 상태를 observable이라는 데코레이터를 사용하여 정의합니다. observable로 선언된 객체는 관찰 대상으로 등록되어, 해당 객체의 상태 변경이 감지되면 자동으로 반응합니다.

import { observable } from "mobx";

class Store {
  @observable count = 0;
}

const store = new Store();

// 상태 변경 감지
autorun(() => {
  console.log(store.count);
});

// 상태 변경
store.count = 10; // 콘솔 출력: 10

상태 변경 (Mutations)

MobX는 action이라는 데코레이터를 사용하여 상태 변경 함수를 정의합니다. action으로 선언된 함수는 observables에 대한 변경을 추적하고 필요한 경우 해당 변경 사항을 자동으로 반영합니다.

import { observable, action } from "mobx";

class Store {
  @observable count = 0;

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

const store = new Store();

console.log(store.count); // 0

store.increment();

console.log(store.count); // 1

비동기 상태 관리

MobX는 비동기 상태를 관리하기 위해 async와 await를 함께 사용할 수 있습니다. 비동기 작업이 완료되면, 해당 작업을 호출한 함수를 다시 실행하여 상태 변경을 반영합니다.

import { observable, action } from "mobx";

class Store {
  @observable loading = false;
  @observable data = null;

  @action
  async fetchData() {
    this.loading = true;

    try {
      const response = await fetch("http://example.com/api/data");
      const json = await response.json();
      this.data = json;
    } catch (error) {
      console.error("Error fetching data:", error);
    }

    this.loading = false;
  }
}

const store = new Store();

store.fetchData(); // 비동기 작업 시작

console.log(store.loading); // true

setTimeout(() => {
  console.log(store.loading); // false
  console.log(store.data); // 데이터 출력
}, 2000);

결론

MobX는 리액트 애플리케이션에서 비동기 상태 관리를 간편하게 구현할 수 있는 좋은 도구입니다. observable과 action을 활용하여 상태 변경을 추적하고, async와 await를 이용하여 비동기 작업을 처리할 수 있습니다. 이를 통해 개발자는 더 높은 생산성을 얻을 수 있습니다.

#mobx #상태관리