[javascript] MobX와 애플리케이션 상태 관리

04 Dec 2023

javascript

애플리케이션 개발 중, 상태 관리는 중요한 측면 중 하나입니다. 앱의 상태를 효과적으로 관리하지 않으면, 코드가 복잡해지고 유지보수가 어려워질 수 있습니다. 이러한 이유로 상태 관리 라이브러리인 MobX가 인기를 얻고 있습니다.

MobX란?

MobX는 JavaScript 애플리케이션의 상태 관리를 단순화하는 라이브러리입니다. MobX를 사용하면 상태 변경에 대한 반응을 정의할 수 있고, 자동으로 그 변경을 반영하는 리액티브한 애플리케이션을 만들 수 있습니다. MobX는 애플리케이션의 상태를 변경하는 액션, 그 상태를 저장하는 스토어, 상태 변경을 관찰하는 리액션으로 구성됩니다.

MobX 사용하기

설치

npm install mobx mobx-react

위 명령어를 실행하여 MobX와 MobX 리액트 라이브러리를 설치합니다.

상태 관리하기

MobX를 사용하여 애플리케이션의 상태를 관리하는 방법은 간단합니다. observable 데코레이터를 사용하여 관리하고 싶은 상태 변수를 선언합니다.

import { observable } from 'mobx';

class CounterStore {
  @observable count = 0;
}

export default new CounterStore();

위 코드에서는 CounterStore라는 클래스를 만들고 count라는 상태 변수를 선언하였습니다. @observable 데코레이터를 사용하여 상태 변수가 관찰 가능하다는 것을 알려줍니다.

액션 정의하기

애플리케이션의 상태를 변경하는 액션은 MobX의 action 데코레이터를 사용하여 정의할 수 있습니다.

import { action } from 'mobx';
import counterStore from './counterStore';

class CounterView {
  @action increaseCount() {
    counterStore.count += 1;
  }

  @action decreaseCount() {
    counterStore.count -= 1;
  }
}

export default new CounterView();

위 예시에서는 CounterView 클래스 내에 increaseCount와 decreaseCount라는 액션을 정의하였습니다. 이 액션들은 counterStore의 count 상태 변수를 감소 또는 증가시킵니다.

상태 사용하기

MobX를 사용하여 상태를 관리하고 액션을 정의했다면, 이 상태를 사용하여 애플리케이션을 개발할 수 있습니다. 상태를 사용하는 컴포넌트는 observer 데코레이터를 사용하여 래핑해야 합니다.

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import counterStore from './counterStore';

@observer
class CounterComponent extends Component {
  render() {
    return (
      <div>
        <button onClick={counterStore.increaseCount}>+</button>
        <span>{counterStore.count}</span>
        <button onClick={counterStore.decreaseCount}>-</button>
      </div>
    );
  }
}

export default CounterComponent;

위 예시에서는 CounterComponent 컴포넌트에서 counterStore의 count 상태 변수를 표시하고, increaseCount와 decreaseCount 액션을 호출하는 버튼을 렌더링합니다. @observer 데코레이터를 사용하여 컴포넌트가 상태를 관찰하도록 했습니다.

결론

MobX는 간편한 API를 제공하여 애플리케이션의 상태 관리를 용이하게 해줍니다. 리액티브한 애플리케이션을 만들기 위한 강력한 도구로서 많은 개발자들에게 선택되고 있습니다. MobX를 적용하면 앱 개발 과정이 더 즐겁고 생산적일 것입니다.

참고: