[javascript] MobX의 실전 사용 사례

04 Dec 2023

javascript

MobX는 JavaScript 애플리케이션에서 상태 관리를 단순화하는 데 도움이 되는 라이브러리입니다. 이 글에서는 MobX를 활용하여 실전에서 어떻게 사용할 수 있는지 살펴보겠습니다.

1. React와 MobX를 함께 사용하기

React는 MobX와 함께 사용하기에 이상적인 프레임워크입니다. MobX에서 제공하는 @observer 데코레이터를 사용하여 React 컴포넌트를 간편하게 관찰 가능한 상태로 변환할 수 있습니다. 이를 통해 강력한 상태 관리와 UI 업데이트를 자동화할 수 있습니다.

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

@observer
class MyComponent extends React.Component {
  render() {
    const { store } = this.props;
    return (
      <div>
        <h1>{store.title}</h1>
        <button onClick={() => store.increment()}>Increment</button>
        <button onClick={() => store.decrement()}>Decrement</button>
      </div>
    );
  }
}

export default MyComponent;

위의 예제에서는 MobX 상태 관리 클래스인 store를 전달받아 사용하고 있습니다. store의 title 속성을 출력하고, increment와 decrement 메소드를 호출하는 버튼을 렌더링하고 있습니다.

2. MobX의 computed와 reaction 사용하기

MobX에서는 computed와 reaction을 사용하여 상태 간의 연산 결과를 효율적으로 관리할 수 있습니다.

import { observable, computed, reaction } from 'mobx';

class MyStore {
  @observable firstName = '';
  @observable lastName = '';

  @computed get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  constructor() {
    reaction(
      () => this.fullName,
      fullName => console.log(`Full name changed to ${fullName}`)
    );
  }
}

const store = new MyStore();
store.firstName = 'John'; // 'Full name changed to John '
store.lastName = 'Doe'; // 'Full name changed to John Doe'

위의 예제는 MyStore 클래스에서 firstName과 lastName을 관찰 가능한 상태로 선언하고, fullName을 computed 속성으로 정의하고 있습니다. 또한 reaction을 사용하여 fullName이 변경될 때마다 콘솔에 로그를 출력하도록 설정하였습니다.

3. MobX와 비동기 작업

MobX는 비동기 작업을 처리하기 위한 방법도 제공합니다. observable 객체를 사용하여 상태를 관찰 가능하게 만들고, async 함수 내에서 await를 사용하여 비동기 작업을 처리할 수 있습니다.

import { observable, autorun } from 'mobx';

class MyAsyncStore {
  @observable data = null;
  @observable loading = false;

  async fetchData() {
    this.loading = true;
    try {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    } catch(error) {
      console.error('Error occurred while fetching data', error);
    } finally {
      this.loading = false;
    }
  }
}

const store = new MyAsyncStore();
autorun(() => {
  if (store.loading) {
    console.log('Data is being loaded');
  } else {
    console.log('Data is loaded', store.data);
  }
});

store.fetchData();

위의 예제에서는 MyAsyncStore 클래스에서 fetchData 메소드를 정의하고 있습니다. fetchData 메소드 내에서는 API를 호출하여 데이터를 가져오고, data와 loading 상태를 업데이트하고 있습니다. 이때 autorun을 사용하여 상태 변화를 자동으로 감지하여 로그를 출력하고 있습니다.

참고 자료

MobX를 실전에서 사용하는 다양한 방법이 있습니다. 이 글에서는 React와 함께 사용하는 방법, computed와 reaction을 활용하는 방법, 그리고 비동기 작업 처리에 대한 예제를 살펴보았습니다. 훌륭한 상태 관리 라이브러리로써 MobX는 개발자들에게 큰 도움이 될 수 있습니다.