최근 웹 개발에서는 복잡한 UI 상태 관리가 필요한 경우가 많습니다. 이를 위해 MobX는 상태 관리 라이브러리로서 많은 개발자들에게 인기를 끌고 있습니다. MobX를 사용하면 콤포넌트의 상태를 쉽게 관리하고 업데이트할 수 있습니다.

MobX는 Observables, Actions, Reactions와 같은 세 가지 주요 개념으로 구성됩니다. Observables는 상태를 나타내며, Actions는 상태를 변경하는 메서드입니다. Reactions는 상태를 감시하고 상태 변화에 반응하는 메서드입니다.

Observables

Observables는 상태를 나타내는 변수입니다. MobX를 사용하려면 콤포넌트의 상태를 Observable로 만들어야 합니다. 이를 위해 @observable 데코레이터를 사용하거나 observable 함수를 사용할 수 있습니다. 예를 들어, 다음과 같은 코드로 콤포넌트의 상태를 Observable로 만들 수 있습니다.

import { observable } from 'mobx';

class MyComponent {
  @observable count = 0;
}

상태 변수 count는 Observable로 선언되고, 이 변수의 값이 변경되면 MobX는 이를 자동으로 감지하여 연관된 콤포넌트를 업데이트합니다.

Actions

Actions는 상태를 변경하는 메서드입니다. @action 데코레이터를 사용하여 액션 메서드를 만들 수 있습니다. 예를 들어, 다음과 같은 코드로 count를 증가시키는 액션 메서드를 만들 수 있습니다.

import { action } from 'mobx';

class MyComponent {
  @observable count = 0;

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

increment 메서드는 count 값을 증가시키는 액션을 수행합니다. 액션 메서드를 호출하면 MobX는 상태 변경을 감지하고 필요한 콤포넌트를 업데이트합니다.

Reactions

Reactions는 상태를 감시하고 상태 변화에 반응하는 메서드입니다. autorun 함수를 사용하여 반응을 정의할 수 있습니다. 예를 들어, 다음과 같은 코드로 상태가 변경될 때마다 로그를 출력하는 반응을 만들 수 있습니다.

import { autorun } from 'mobx';

class MyComponent {
  @observable count = 0;

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

  constructor() {
    autorun(() => {
      console.log(`Count: ${this.count}`);
    });
  }
}

autorun 함수의 콜백 함수는 관찰하고 있는 상태가 변경될 때마다 실행됩니다. 위의 예제에서는 count 값이 변경될 때마다 로그를 출력하는 반응을 나타냅니다.

결론

MobX를 사용하면 콤포넌트의 상태 관리를 간편하게 처리할 수 있습니다. Observables로 상태를 정의하고, Actions로 상태를 변경하고, Reactions로 상태 변화에 반응할 수 있습니다. 이를 통해 웹 개발에서 발생하는 복잡한 상태 관리 문제를 해결할 수 있습니다.

참고 자료:

• MobX 공식 문서