상태 관리는 모든 프론트엔드 애플리케이션의 핵심적인 부분입니다. 이를 위해 MobX는 매우 강력하고 효율적인 상태 관리 라이브러리입니다. MobX를 통해 상태 변이를 관리하는 방법을 살펴보겠습니다.

MobX 소개

MobX는 상태 관리를 위한 간단하고 직관적인 해결책을 제공합니다. 이 라이브러리를 사용하면 상태 변이 및 상태 변경에 관련된 모든 작업을 간소화할 수 있습니다.

MobX는 두 가지 주요 개념을 기반으로 작동합니다: observable(관찰 가능한)과 action(액션). observable은 상태를 정의하고, action은 상태를 변경하는 메소드입니다.

관찰 가능한(observable) 상태

MobX를 사용하려면 관찰 가능한 상태를 정의해야 합니다. 이를 위해 observable 함수를 사용합니다. 아래는 예시입니다.

import { observable } from 'mobx';

const user = observable({
  name: 'John',
  age: 25,
});

위 코드에서 user 객체는 관찰 가능한 상태로 정의되었습니다. 이제 user 객체의 상태에 변화가 생길 때마다 MobX는 해당 변경을 감지하고, 관련된 부분을 자동으로 업데이트합니다.

액션(action)

액션은 상태를 변경하는 메소드입니다. MobX는 액션 내부에서 일어나는 상태 변이를 관찰하고 추적합니다. 이를 위해 action 키워드를 사용합니다. 아래는 예시입니다.

import { observable, action } from 'mobx';

const user = observable({
  name: 'John',
  age: 25,
  
  changeName: action(function (newName) {
    this.name = newName;
  }),

  incrementAge: action(function () {
    this.age += 1;
  }),
});

위 코드에서 user 객체에는 changeName 메소드와 incrementAge 메소드가 정의되어 있습니다. 이 메소드들은 액션이므로 MobX가 해당 상태 변화를 관찰하고 업데이트할 수 있습니다.

@observable과 @action 데코레이터

MobX에서는 ESNext 데코레이터 문법을 사용하여 더 간결하게 코드를 작성할 수도 있습니다. @observable 데코레이터는 관찰 가능한 상태를 정의하고, @action 데코레이터는 액션을 정의합니다. 아래는 데코레이터를 사용한 예시입니다.

import { observable, action } from 'mobx';

class User {
  @observable name = 'John';
  @observable age = 25;
  
  @action
  changeName(newName) {
    this.name = newName;
  }

  @action
  incrementAge() {
    this.age += 1;
  }
}

위 코드에서 User 클래스의 멤버 변수 name과 age는 관찰 가능한 상태로 선언되었고, changeName과 incrementAge 메소드는 액션으로 정의되었습니다.

결론

MobX는 간단하고 직관적인 상태 관리 라이브러리로, 상태 변이를 효율적이고 간편하게 처리할 수 있게 합니다. 이 글에서는 MobX의 기본 개념 및 사용 방법에 대해 살펴보았습니다. MobX를 사용하면 상태 변이를 처리하는 데 있어서 많은 장점을 얻을 수 있으므로, 프론트엔드 개발에서 활용할 수 있는 강력한 도구임을 알 수 있습니다.

참고 자료

• MobX 공식 문서 (영문)
• MobX 깃허브 저장소 (영문)