[typescript] MobX와 타입스크립트를 함께 사용하여 비동기 데이터 플로우 구현하기

21 Dec 2023

typescript

MobX는 상태 관리 라이브러리로써, React와 함께 사용되는 것이 일반적입니다. 이 라이브러리는 상태를 변화 시킬 때, 그 변화를 주시하고 필요한 부분만 업데이트해 주는 뛰어난 성능을 자랑합니다. 그리고, 타입스크립트와 같이 쓰일 때, 코드의 가독성과 유지보수가 용이해지는 다양한 장점을 얻을 수 있습니다. 이번에는 MobX와 타입스크립트를 함께 사용하여 비동기 데이터 플로우를 구현하는 방법에 대해 살펴보겠습니다.

1. MobX 설치하기

먼저, MobX를 설치합니다. 아래의 명령어를 사용하여 프로젝트에 MobX를 추가합니다.

npm install mobx mobx-react

2. 비동기 데이터 플로우를 위한 MobX 사용하기

2.1. Observable 상태 만들기

MobX를 사용하여 어떤 상태를 관찰 가능한 상태로 만들고, 그 상태에 변화가 있을 때 알림을 받을 수 있습니다. 타입스크립트를 사용할 경우, Observable 상태를 만들 때 해당 상태의 타입을 함께 명시하는 것이 좋습니다.

예를 들어, 사용자 목록을 가져오는 API 호출 결과를 Observable 상태로 만들어 보겠습니다.

import { observable, action } from "mobx";

interface User {
  id: number;
  name: string;
}

class UserStore {
  @observable users: User[] = [];

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

const userStore = new UserStore();

위의 코드에서 @observable 데코레이터로 users 상태를 Observable로 만들고, @action 데코레이터와 async 키워드를 사용하여 fetchUsers 메소드를 정의하였습니다. 이제 fetchUsers 메소드를 호출하면, 사용자 목록을 가져와 users 상태를 업데이트할 수 있습니다.

2.2. React 컴포넌트에서 MobX 사용하기

React 컴포넌트에서 MobX를 사용하려면, @observer 데코레이터를 사용하여 해당 컴포넌트를 감싸야 합니다. 이 데코레이터를 사용하면, 컴포넌트는 MobX 스토어의 Observable 상태를 구독하고, 해당 상태가 변경될 때마다 자동으로 렌더링됩니다.

import React from "react";
import { observer } from "mobx-react";
import { userStore } from "./UserStore";

const UserList: React.FC = observer(() => {
  return (
    <div>
      <button onClick={userStore.fetchUsers}>Load Users</button>
      <ul>
        {userStore.users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
});

export default UserList;

위의 코드에서 observer 함수를 사용하여 UserList 컴포넌트를 감싸고 있습니다. 이제 UserList 컴포넌트는 userStore의 users 상태를 구독하고, 해당 상태가 변경될 때마다 자동으로 렌더링됩니다.

이렇게 MobX와 타입스크립트를 함께 사용하여 비동기 데이터 플로우를 구현할 수 있습니다. MobX의 강력한 상태 관리 기능을 활용하여 상태 변화에 따른 뷰의 자동 업데이트를 구현하고, 타입스크립트의 강력한 타입 시스템을 통해 안정적인 코드를 작성할 수 있습니다.

참고 자료: