MobX는 상태 관리 라이브러리로서, React 애플리케이션에서 손쉽게 상태를 관리할 수 있도록 도와줍니다. 이번 글에서는 MobX 스토어에서 외부 REST API를 사용하는 방법에 대해 알아보겠습니다.

REST API 연동을 위한 준비하기

1. 먼저, axios 또는 fetch와 같은 HTTP 클라이언트 라이브러리를 설치합니다. 이러한 라이브러리를 사용하여 REST API와 통신할 수 있습니다.

2. MobX 스토어를 생성하고, 필요한 상태와 액션을 정의합니다.

import { observable, action } from 'mobx';

class TodoStore {
  @observable todos = [];

  @action
  async fetchTodos() {
    try {
      const response = await axios.get('/api/todos');
      this.todos = response.data;
    } catch (error) {
      console.error('Error fetching todos:', error);
    }
  }
}

const store = new TodoStore();
export default store;

1. 위의 코드에서 fetchTodos 액션은 REST API에서 할 일 목록을 가져와 todos 배열에 할당합니다. 이때, axios.get 메서드를 사용해 서버에 HTTP GET 요청을 보내고 응답으로 받은 데이터를 todos에 저장합니다.

MobX 스토어 사용하기

1. 상위 컴포넌트에서 MobX 스토어를 가져옵니다.

import { observer } from 'mobx-react';
import todoStore from './stores/todoStore';

1. MobX 스토어의 상태를 사용하려는 컴포넌트에 @observer 데코레이터를 사용하여 관찰 가능한 상태로 만듭니다.

@observer
class TodoList extends React.Component {
  componentDidMount() {
    todoStore.fetchTodos();
  }

  render() {
    const { todos } = todoStore;
    return (
      <div>
        {todos.map((todo) => (
          <div key={todo.id}>{todo.text}</div>
        ))}
      </div>
    );
  }
}

export default TodoList;

위의 코드에서 componentDidMount 함수에서 fetchTodos 액션을 호출하여 초기 할 일 목록을 가져옵니다. 그리고 render 함수에서 todos 배열을 렌더링합니다.

마무리

MobX 스토어에서 외부 REST API를 사용하는 것은 매우 간단합니다. 필요한 데이터를 가져와 MobX의 상태로 할당하면, 애플리케이션에서 해당 데이터를 사용할 수 있습니다. MobX는 리액트와 함께 사용하기에 이상적인 상태 관리 라이브러리입니다.

참고 자료

• MobX 공식 문서
• axios GitHub 저장소