[React] MobX - 비동기화

MobX를 비동기화하는 방법은 async await을 사용하는 방법과 generator를 사용하는 방법이 있다. 

 

1. async await 

import { makeObservable, action, runInAction, observable } from "mobx";
import axios from "axios";

export default class Test {
  info = "";

  constructor() {
    makeObservable(this, {
      info: observable,
      get: action,
    });
  }

  get = async () => {
    const data = await axios.get("/info");

    runInAction(() => {
      console.log(data);

      this.info = data.data.name;
    });
  };

}

MobX는 Action 내부에서 promise 작업, 즉 비동기 작업을 할 경우 observable 값을 바꾸려면 다시 액션 함수를 

만들어서 호출하거나, 외부의 액션 함수를 호출해야 가능하다. 

 

하지만, runInAction을 사용하면, 함수 내부에서 observable 값을 바꿀 수 있게된다. 

 

2. generator/yield + flow 

제너레이터와 MobX의 flow 속성을 이용하는 방법도 있다. 

import { makeObservable, action, runInAction, observable, flow } from "mobx";
import axios from "axios";

export default class Test {
  info2 = "";

  constructor() {
    makeObservable(this, {
      info2: observable,
      get2: flow,
    });
  }

  get2 = function* () {
    try {
      const data = yield axios.get("/info");

      this.info2 = data.data.name;
    } catch (error) {}
  };
}

제너레이터 함수와 flow를 사용하면 runInAction을 사용하는 방식과는 다르게 부수적인 작업이 필요없어서 

코드가 깔끔해지는 장점이 있다. 

 

또한 만약에 비동기 작업을 멈추고 싶다면, get2.cancel() 함수를 호출하면 비동기 작업이 캔슬된다.