[typescript] MobX의 observable과 타입스크립트 인터페이스의 연동 방법

21 Dec 2023

typescript

MobX는 상태 관리 라이브러리로, TypeScript와 함께 사용할 수 있습니다. MobX는 상태 관리를 위해 observable을 사용하며, TypeScript는 강력한 정적 타입을 제공합니다. 그렇다면 MobX의 observable과 TypeScript의 인터페이스를 어떻게 연동할 수 있을까요? 이를 살펴보겠습니다.

MobX observable 사용하기

먼저 MobX에서 observable을 사용하여 관찰할 수 있는 상태를 만들어봅시다.

import { observable } from 'mobx';

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

class UserStore {
  @observable userInfo: User | null = null;
}

위의 예제에서 @observable 데코레이터를 사용하여 userInfo를 observable로 만들었습니다.

TypeScript 인터페이스와 observable 연동하기

다음으로 TypeScript 인터페이스를 사용하여 MobX의 observable과 연동해보겠습니다.

import { observable } from 'mobx';

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

class UserStore {
  @observable userInfo: IUser | null = null;
}

User 인터페이스를 IUser로 정의하고, userInfo의 타입을 IUser로 지정하였습니다.

관찰 가능한 상태 사용하기

이제 관찰 가능한 상태를 사용하는 예제를 살펴봅시다.

import { observer } from 'mobx-react';
import React from 'react';

interface Props {
  userStore: UserStore; // UserStore 이라는 MobX 스토어를 Props로 받음
}

@observer
class UserComponent extends React.Component<Props> {
  render() {
    const { userInfo } = this.props.userStore;

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

    return (
      <div>
        <p>ID: {userInfo.id}</p>
        <p>Name: {userInfo.name}</p>
      </div>
    );
  }
}

위의 예제에서 @observer 데코레이터를 사용하여 MobX의 observable을 사용하는 리액트 컴포넌트를 만들었습니다.

결론

이렇게 MobX의 observable과 TypeScript 인터페이스를 연동하여 사용할 수 있습니다. MobX는 TypeScript와의 호환성이 뛰어나며, 정적 타입 검사와 함께 상태 관리를 간편하게 할 수 있습니다.

참고: MobX 공식 문서, TypeScript 공식 문서