MobX에서 옵저버는 상태의 변화를 감지하고, 그 변화에 따라 자동으로 업데이트되는 함수입니다. 옵저버는 autorun, reaction, when과 같은 메소드를 통해 생성할 수 있습니다.

첫 번째로 autorun입니다. autorun은 상태를 읽는 코드 내에서 상태의 변화를 감지하고, 해당 상태에 대한 의존성을 자동으로 추적합니다. 그리고 상태가 변화할 때마다 자동으로 실행되어 코드를 업데이트합니다. 예를 들어, 아래의 코드에서 autorun은 counter 상태가 변할 때마다 console.log를 호출합니다.

import { autorun } from 'mobx';

const counter = observable({
  count: 0
});

autorun(() => {
  console.log('실행됨:', counter.count);
});

counter.count = 1; // 실행됨: 1
counter.count = 2; // 실행됨: 2

두 번째로 reaction입니다. reaction은 상태의 변화를 감지하여 어떤 특정 동작을 수행하고자 할 때 사용됩니다. autorun과 달리 특정한 의존성을 추적하는 것이 아니라, 사용자가 직접 의존성을 정의하고 싶을 때 유용합니다. 예를 들어, 아래의 코드에서 reaction은 counter.count가 5 이상일 때마다 alert을 호출합니다.

import { reaction } from 'mobx';

reaction(
  () => counter.count,
  (count) => {
    if (count >= 5) {
      alert('카운터가 5 이상입니다!');
    }
  }
);

counter.count = 3;
counter.count = 7; // 카운터가 5 이상입니다!

마지막으로 when입니다. when은 특정 조건이 충족될 때까지 기다렸다가 특정 동작을 수행하고 싶을 때 사용됩니다. 예를 들어, 아래의 코드에서 when은 counter.count가 10이 되면 콘솔에 메시지를 출력합니다.

import { when } from 'mobx';

when(
  () => counter.count === 10,
  () => {
    console.log('카운터가 10이 되었습니다!');
  }
)

counter.count = 5;
counter.count = 10; // 카운터가 10이 되었습니다!

MobX의 옵저버 기능을 활용하면 상태의 변화를 편리하게 감지하고, 그에 따른 자동 업데이트를 수행할 수 있습니다. 자세한 내용은 MobX 공식 문서를 참고하시기 바랍니다.

참고 자료:

• MobX 공식 문서