상태 관리 라이브러리 - MobX (2. 기본 사용법)

기본 사용법

기본적으로 MobX의 store는 class를 기반으로 제작한다. store의 이름은 "oberservable-이름-store.ts" 이런식으로 작성하는 것이 관례이다. 다음 예제는 동물의 체력 상태를 알려주는 간단한 예제이다.

1. Observer class 작성

import { makeObservable, observable, computed, action, autorun, makeAutoObservable } from 'mobx';

export class Animal {
    energy: number;					

    constructor() {
        this.energy = 100;
        makeObservable(this, {
            energy: observable,
            consumeEnergy: action,
            isHungry: computed
        });

        autorun(() => {
            if (this.isHungry) {
                console.log('이제 배고파..');
            }
            
            else {
                console.log('배불러!');
            }
        });

        autorun(() => {
            console.log('현재 에너지 상태 : ' + this.energy);
        });
    }

    public consumeEnergy() {
        this.energy -= 10;
    }    
    
    get isHungry () {
        return this.energy < 50;
    }
}

export const observalAnimalStore = new Animal();  // 관례대로 store 이름을 작성해준다.

각각 사용된 mobx 기능을 살펴보자.

• makeObservable
  객체에 MobX 관련 데코레이터를 적용하기 위한 초기화 함수이다.

• observable
  해당 변수를 관찰 가능한 상태로 만들어준다. 위 코드에서는 energy라는 class 멤버가 observable로 정의되어 energy라는 상태를 만들어 주었다.

• action
  해당 함수를 MobX 액션으로 만들어줍니다. 액션으로 정의된 함수는 상태의 변화를 추적하고 관리하는 역할을 한다. 위 코드에서 consumeEnergy 함수가 action으로 정의되었다.

• computed
  상태를 계산된 값으로 만들어준다. 계산된 값은 다른 상태의 변화에 따라 자동으로 갱신된다. 위 코드에서 isHungry 함수가 계산된 값으로 정의되었다.

• autorun
  autorun 함수는 상태나 계산된 값의 변화를 감지하고, 특정 시점에 작성된 기능을 실행시켜준다. autorun 함수 내에서는 MobX 상태를 자동으로 추적하고, 해당 상태나 계산된 값이 변할 때마다 함수가 실행된다.

• makeAutoObservable
  makeAutoObservable은 객체를 자동으로 MobX 관련 데코레이터로 감싸주는 함수이다. 위 코드에서는 클래스의 constructor() 안에서 makeObservable 대신 makeAutoObservable을 사용하여 간편하게 mobx가 자동으로 옵션을 지정해주도록 작성하였다.

2. Observer Class를 구독하는 컴포넌트 작성

const MobxExample: FC= () => {

    const store = observalAnimalStore;		// export한 class 인스턴스를 가져와 사용한다.
	
    // 에너지를 소비하는 consumeEnergy()를 반복적으로 호출한다. consumerEnergy()는 
    // store에서 정의한 mobx의 action함수이기에 energy state값이 변경되며 컴포넌트가 업데이트된다.
    for (let i=0; i<7; i++ ){
        store.consumeEnergy();
    }  

    return (
        <div>
            <span>{store.energy}</span>		// energy는 100에서 70이 소비되므로 최종적으로 30이 된다.
        </div>
    );
};

export default observer(MobxExample);

• observer
  mobx에서 import한 함수이다. 컴포넌트를 감싸서 mobx 관련 상태 변화를 자동으로 감지하고 컴포넌트를 리렌더링하게 해주는 역할을 한다.

해당 컴포넌트의 결과는 다음과 같다.
autorun()에 정의된 2개의 함수에 의해 각각 energy의 상태의 변경에 따라 정의된 로직이 실행된 모습이다.

mobx에서 이루어지는 state가 변경되는 순서를 정리하자면,
이벤트 발생 --> Action호출 ---> update 발생 ---> observable state가 변경 --->
computed value에 알림 ---> 컴포넌트 render 발생

mobx에서 가장 중요한 키워드는 observable과 action이라고 볼 수 있다. 이 두가지에 의해 상태가 운영되고, 그 상태의 변화에 따라서 컴포넌트가 render가 된다.