MobX는 JavaScript 상태 관리 라이브러리로, 리액션(Reaction)이라는 개념을 제공합니다. 리액션은 MobX에서 상태 변화에 대한 자동 반응을 구현하는 방법입니다.

리액션은 Observable 상태나 컴퓨티드 값을 기반으로 동작하며, 이들 값에 의존성을 가지고 있습니다. 따라서 의존하는 값이 변경되었을 때, 리액션은 자동으로 다시 실행됩니다.

리액션은 주로 뷰 컴포넌트나 비동기 작업 등에서 사용됩니다. 예를 들어, 화면에 표시될 데이터가 변경되었을 때 자동으로 화면을 업데이트하거나, 비동기 작업의 완료 여부를 감지하여 적절한 동작을 수행하는 등의 경우에 리액션을 활용할 수 있습니다.

MobX 리액션의 종류

MobX는 다양한 종류의 리액션을 제공합니다. 가장 일반적인 리액션은 autorun, when, reaction입니다.

• autorun: 추적되는 모든 값에 대해 자동으로 실행되는 리액션입니다. 즉, 의존성을 추적하고 있는 값이 변경될 때마다 리액션을 실행합니다.
• when: 주어진 조건이 참이 될 때 리액션을 실행합니다. 실행 후 조건이 계속해서 참인 경우에도 리액션은 한 번만 실행됩니다.
• reaction: 추적되는 값과 종속성 함수를 기반으로 하는 리액션입니다. 리액션이 의존하는 값이 변경될 때마다 종속성 함수를 실행하고, 그 결과에 따라 리액션을 실행할지 여부를 결정합니다.

MobX 리액션의 예제

다음은 MobX 리액션을 사용하는 간단한 예제입니다.

import { observable, autorun } from 'mobx';

const data = observable({
  count: 0,
});

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

data.count = 1;
data.count = 2;

위 예제에서는 autorun을 사용하여 data.count 값이 변경될 때마다 자동으로 실행되는 리액션을 정의합니다. autorun 내부에서는 변경된 count 값을 콘솔에 출력합니다. 따라서 data.count가 1로 변경되었을 때와 2로 변경되었을 때, 해당 리액션이 실행되어 콘솔에 출력됩니다.

참고 문서: MobX 리액션