[Mobx] autorun이란?

Autorun이란?

MobX의 autorun은 observable state가 변경될 때 특정 작업을 자동으로 실행 하도록 도와주는 반응형 유틸리티이다. 내부에서 상태의 의존성을 자동으로 추적하여 상태가 변경되면 지정한 작업이 실행된다.

처음 보면 무슨 말인가 싶다. 그렇다면,

언제 autorun을 사용해야 할까?

• 상태 변경 시 로그를 기록하거나, 단순한 비동기 작업(API 호출 등)을 실행할 때 적합하다.
• UI 외부에서 상태 변경에 따라 반응형 작업이 필요할 경우 유용하다.

기본 동작

1. autorun은 첫 실행 시점에서 코드 내부에서 사용하는 모든 observable state를 추적한다.
2. 상태가 변경되면 autorun 블록 내부의 코드가 재실행된다.
3. 불필요한 실행은 피하며, 의존성이 변경될 때만 실행된다.

코드 예제

import { makeAutoObservable, autorun } from "mobx";

class Store {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }
}

const store = new Store();

// autorun 사용
autorun(() => {
  console.log(`Count has changed: ${store.count}`);
});

// 상태 변경
store.count = 1; // 콘솔 출력: "Count has changed: 1"
store.count = 2; // 콘솔 출력: "Count has changed: 2"

autorun의 특징

• 자동 의존성 추적: 내부에서 사용하는 모든 관찰 가능한 상태를 자동으로 추적한다.
• 상태 변경에 따른 재실행: 추적된 상태가 변경되면 코드 블록이 재실행된다.
• 최소 실행: 불필요한 재실행을 방지하며, 실제로 의존성이 변경될 때만 실행된다.

autorun과 reaction의 차이

autorun

• 용도: 코드 블록 내부에서 참조한 모든 관찰 가능한 상태를 자동으로 추적.
• 특징: 의존성이 변경되면 전체 코드 블록을 재실행.

autorun(() => {
  console.log(`Count has changed: ${store.count}`);
});

reaction

• 용도: 특정 상태에만 반응하도록 명시적으로 정의.
• 특징: 의존성이 변경되면 특정 콜백 함수만 실행.

reaction(
  () => store.count, // 의존성 대상 설정
  (count) => {
    console.log(`Count has changed: ${count}`); // 상태 변경 시 실행
  }
);

정리

• autorun은 관찰 가능한 상태 변경에 따라 자동으로 실행되는 반응형 유틸리티이다.
• 내부에서 상태를 자동으로 추적하므로 개발자 입장에서 코드 작성이 간결하다.
• 더 세밀한 상태 관리가 필요하다면 reaction을 사용하는 것이 적합하다.