MobX는 JavaScript 애플리케이션의 상태 관리를 위한 라이브러리입니다. 애플리케이션의 상태를 관리하면서 필요한 경우 상태를 변경하기 위해 사용되는 액션에 대해 알아보겠습니다.

액션은 MobX에서 상태 변경을 표현하는 함수입니다. 액션은 상태를 변경하는 코드 블록을 감싸고 MobX에게 상태의 변경을 추적하도록 알립니다. 액션을 통해 상태 변경을 예측 가능하고 추적 가능하게 만들 수 있습니다.

액션을 정의하려면 @action 데코레이터를 사용하거나 action 함수를 호출합니다. 액션 함수 내에서 상태를 직접 변경하는 것이 가능하지만, MobX의 추적 및 최적화 기능을 활용하려면 액션 내에서 변경해야 합니다.

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

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

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

const counter = new CounterStore();
counter.increment();
console.log(counter.count); // 1
counter.decrement();
console.log(counter.count); // 0

위의 예제에서 CounterStore라는 클래스를 정의하고 count라는 관찰 가능한 상태를 가지고 있습니다. increment 및 decrement라는 액션 함수는 상태를 변경하기 위해 this.count++ 및 this.count--를 사용합니다.

액션은 변경된 상태를 추적하고 상태의 변화에 따라 필요한 부분만 다시 렌더링하므로 효율적인 상태 관리가 가능합니다. 또한 액션은 비동기적인 작업에 사용될 수도 있으며, MobX는 자동으로 액션의 완료 후 상태의 변경을 감지합니다.

참고 문서: MobX 공식 문서