MobX는 React 애플리케이션의 상태 관리를 위한 강력한 라이브러리입니다. 비동기 API 호출을 처리하는 경우에도 MobX를 사용하여 상태를 관리할 수 있습니다. 이번 글에서는 MobX를 사용하여 비동기 API 호출을 처리하는 방법에 대해 알아보겠습니다.

1. MobX 액션과 비동기 처리

MobX에서 비동기 작업을 처리하기 위해서는 액션과 함께 async 키워드를 사용해야 합니다. 액션은 MobX에서 상태 변경을 추적하고 갱신하는 데 사용됩니다. 따라서 비동기 작업을 수행하는 함수를 MobX 액션으로 선언해야 합니다.

import { observable, action } from "mobx";

class Store {
  @observable data = null;

  @action async fetchData() {
    try {
      const response = await fetch("https://api.example.com/data");
      const jsonData = await response.json();
      this.data = jsonData;
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }
}

const store = new Store();

위 예제에서는 fetchData 함수를 MobX 액션으로 선언하고, 비동기적으로 데이터를 가져와서 data 상태를 업데이트합니다. fetch 함수를 사용하여 비동기 요청을 보내고, 응답을 JSON 형식으로 변환하여 data 상태에 저장합니다.

2. MobX 리액트 컴포넌트와 연결

MobX와 함께 비동기 API 호출을 처리하는 경우, MobX의 상태 변화를 리액트 컴포넌트에 반영해주어야 합니다. 이를 위해 MobX 리액트 컴포넌트를 이용하여 MobX 상태를 구독하고, 상태 변경 시 컴포넌트를 자동으로 업데이트할 수 있습니다.

import React, { Component } from "react";
import { observer } from "mobx-react";

@observer
class DataDisplay extends Component {
  render() {
    const { data } = this.props.store;

    if (!data) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <h2>Data:</h2>
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default DataDisplay;

위 예제에서는 observer 데코레이터를 사용하여 MobX 상태를 구독하는 리액트 컴포넌트를 만듭니다. 상태가 변경되면 render 메소드가 호출되어 컴포넌트를 업데이트합니다. data 상태가 null인 경우 “Loading…” 메시지를 표시하고, 데이터가 있는 경우 데이터를 화면에 표시합니다.

3. 사용 예시

이제 MobX를 사용하여 비동기 API 호출을 처리하는 예시를 살펴보겠습니다. 먼저, Store 클래스의 인스턴스를 생성하고 데이터를 가져오는 fetchData 함수를 호출합니다. 그리고 DataDisplay 컴포넌트를 렌더링하여 데이터를 화면에 표시합니다.

import React from "react";
import { render } from "react-dom";
import store from "./store";
import DataDisplay from "./DataDisplay";

store.fetchData();

render(<DataDisplay store={store} />, document.getElementById("root"));

위 예시에서는 fetchData 함수를 호출하여 비동기적으로 데이터를 가져옵니다. 그리고 DataDisplay 컴포넌트를 렌더링할 때 store를 props로 전달하여 MobX 상태를 가져옵니다.

결론

MobX를 사용하여 비동기 API 호출을 처리하는 방법을 살펴보았습니다. MobX 액션을 사용하여 비동기 작업을 수행하고, MobX 리액트 컴포넌트를 사용하여 리액트 컴포넌트를 MobX 상태와 연결할 수 있습니다. 이를 통해 비동기적인 상태 변화를 간편하게 관리하고, 리액트 애플리케이션을 효과적으로 구축할 수 있습니다.

#MobX #비동기API