옵저버블은 MobX에서 중요한 개념 중 하나로, 상태를 관찰하고 변화를 감지하기 위해 사용됩니다. 옵저버블은 일반적으로 클래스 데코레이터(@observable) 또는 함수 데코레이터(observable)를 통해 정의됩니다.

import { observable } from 'mobx';

class Store {
  @observable value = 0;
  
  increment() {
    this.value++;
  }
}

const myStore = new Store();

// 상태 변화 감지
const disposer = observe(myStore, 'value', (change) => {
  console.log('변화 감지:', change.newValue);
});

myStore.increment(); // "변화 감지: 1" 출력

// 옵저버블 제거
disposer();

위의 코드에서는 MobX의 observable 데코레이터를 사용하여 Store 클래스 내의 value 속성을 옵저버블로 만들었습니다. 이렇게 옵저버블로 지정된 속성은 MobX에서 해당 속성의 변화를 추적하고, 상태가 변경될 때마다 업데이트됩니다.

또한 observe 함수를 사용하여 옵저버블을 감시하고, 변화가 감지될 때마다 콜백 함수가 실행됩니다. 콜백 함수에서는 변화된 값에 접근할 수 있으며, 이를 통해 애플리케이션에 필요한 추가적인 로직을 처리할 수 있습니다.

마지막으로 옵저버블을 제거하기 위해 disposer 함수를 호출하여 감시를 중단할 수 있습니다.

이러한 MobX의 옵저버블을 사용하면 상태 관리가 더욱 쉬워지며, 데이터의 변화를 감지하고 적절한 처리를 수행할 수 있습니다.

참고자료

• MobX 공식 문서
• MobX GitHub 저장소