이 글에서는 MobX를 사용하여 RESTful API와 통신하는 방법에 대해 알아보겠습니다.

RESTful API는 웹 애플리케이션과 서버 간의 통신을 위한 일반적인 패턴입니다. MobX는 상태 관리 라이브러리로, 애플리케이션의 상태를 효과적으로 관리할 수 있도록 도와줍니다.

MobX 상태 관리 설정

먼저 MobX를 설치하고 설정해야 합니다. 이를 위해 프로젝트 폴더에서 다음 명령어를 실행합니다:

npm install mobx mobx-react

그리고 MobX Store 파일을 생성하여 상태를 관리하는 로직을 작성합니다. 예를 들어 UserStore.js 파일을 생성하고 다음과 같은 내용을 작성합니다:

import { observable, action } from 'mobx';

class UserStore {
  @observable users = [];

  @action
  async fetchUsers() {
    try {
      const response = await fetch('/api/users');
      const data = await response.json();
      this.users = data;
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  }
}

export default new UserStore();

위 코드는 users 배열을 observable한 상태로 만들고, fetchUsers 액션을 정의합니다. fetchUsers는 서버로부터 사용자 목록을 가져와 users 배열에 저장합니다.

컴포넌트에서 MobX Store 사용하기

이제 컴포넌트에서 MobX Store를 사용하여 RESTful API와 통신해보겠습니다. UserList.js 파일을 생성하고 다음과 같은 내용을 작성합니다:

import React, { useEffect } from 'react';
import { observer } from 'mobx-react';
import UserStore from './UserStore';

const UserList = observer(() => {
  useEffect(() => {
    UserStore.fetchUsers();
  }, []);

  return (
    <div>
      <h1>사용자 목록</h1>
      {UserStore.users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
});

export default UserList;

위 코드는 UserList 컴포넌트를 정의하고, useEffect 훅을 사용하여 fetchUsers 액션을 호출합니다. 그리고 UserStore.users를 맵핑하여 사용자 목록을 출력합니다.

결론

MobX를 사용하여 RESTful API와 통신하는 방법에 대해 알아보았습니다. MobX를 사용하면 애플리케이션의 상태 관리를 간편하게 할 수 있으며, RESTful API와의 통신도 간단한 코드로 처리할 수 있습니다. 추가적인 자세한 내용은 MobX 공식 문서를 참고하시기 바랍니다.

참고 자료

• MobX 공식 문서
• RESTful API