MobX는 JavaScript 애플리케이션의 상태 관리를 간편하게 해주는 라이브러리입니다. 이 글에서는 MobX를 설치하고 설정하는 방법에 대해 알아보겠습니다.

1. MobX 설치하기

MobX를 사용하기 위해서는 먼저 프로젝트에 MobX를 설치해야 합니다. npm을 사용하여 설치하는 방법은 다음과 같습니다.

npm install mobx mobx-react

이 명령을 실행하면 mobx와 mobx-react 패키지가 프로젝트에 설치됩니다.

2. MobX 설정하기

MobX를 사용하기 위해선 몇 가지 설정해야할 사항들이 있습니다.

2.1. MobX를 사용할 컴포넌트에 @observer 데코레이터 적용하기

MobX를 사용하려는 컴포넌트 파일의 상단에 다음 줄을 추가합니다.

import { observer } from 'mobx-react'

그리고 @observer 데코레이터를 컴포넌트 클래스 위에 붙여줍니다.

@observer
class MyComponent extends React.Component {
  // ...
}

이렇게 하면 해당 컴포넌트는 MobX의 관찰 대상이 되며, 상태가 변경될 때마다 자동으로 렌더링됩니다.

2.2. MobX 상태 관리하기

MobX는 상태를 자동으로 관리해주는 기능을 제공합니다. 다음은 상태를 관리할 MobX 스토어를 정의하는 예제입니다.

import { observable, action } from 'mobx'

class CounterStore {
  @observable count = 0

  @action
  increment() {
    this.count++
  }

  @action
  decrement() {
    this.count--
  }
}

export default new CounterStore()

위 예제에서 count라는 상태와 increment, decrement라는 액션(상태를 변경하는 메서드)을 가지는 CounterStore라는 MobX 스토어가 정의되었습니다.

2.3. MobX 스토어 사용하기

애플리케이션의 다른 컴포넌트에서 MobX 스토어를 사용하려면 해당 스토어를 import 해와서 사용하면 됩니다.

import counterStore from './counterStore'

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <span>{counterStore.count}</span>
        <button onClick={counterStore.increment}>+</button>
        <button onClick={counterStore.decrement}>-</button>
      </div>
    )
  }
}

위 예제에서 counterStore라는 MobX 스토어의 count 상태와 increment, decrement 액션을 사용하여 버튼을 클릭할 때마다 숫자가 증가 혹은 감소하는 컴포넌트가 정의되었습니다.

마무리

위에서는 MobX를 설치하고 설정하는 방법에 대해 알아보았습니다. MobX는 간편하게 상태 관리를 할 수 있도록 도와주는 매우 유용한 라이브러리입니다. 기존의 반복적이고 복잡한 상태 관리 코드를 줄일 수 있으며, 컴포넌트의 재렌더링을 최적화하여 애플리케이션의 성능을 향상시킬 수 있습니다. MobX를 사용해보세요!

참고 문서: MobX 공식 문서