Colin's Blog
[javascript] MobX의 주요 개념

MobX는 JavaScript 애플리케이션의 상태 관리를 위한 강력한 라이브러리입니다. MobX는 Observable, Action, Reaction, Computed와 같은 몇 가지 핵심 개념을 제공하여 데이터 상태 변화에 따른 자동 리렌더링을 가능하게 합니다.

Observable

Observable은 MobX에서 관찰 가능한 데이터를 나타냅니다. 관찰 가능한 데이터는 변화를 추적하고, 해당 데이터가 변경될 때 자동으로 리렌더링을 트리거합니다. Observable은 observable 함수를 사용하여 생성할 수 있습니다.

import { observable } from 'mobx';

const user = observable({
  name: 'John',
  age: 30
});

위의 예제에서 user 객체는 Observable로서 name과 age 속성을 가지게 됩니다. 이렇게 생성된 Observable 객체는 추후에 변경되는 모든 속성에 대한 변화를 감지하여 리렌더링을 트리거합니다.

Action

Action은 MobX에서 상태 변경을 수행하는 함수를 가리킵니다. Action은 @action 데코레이터를 사용하여 정의하거나, runInAction 함수를 통해 실행할 수 있습니다. Action 내에서 상태를 직접 수정하여도 MobX는 이를 추적하여 자동으로 리렌더링을 수행합니다.

import { action } from 'mobx';

const incrementAge = action(() => {
  user.age += 1;
});

// 또는

import { runInAction } from 'mobx';

const incrementAge = () => {
  runInAction(() => {
    user.age += 1;
  });
}

위의 예제에서 incrementAge 함수는 user 객체의 age 속성을 1씩 증가시키는 작업을 수행하는 Action입니다. Action 내에서는 Observable에 직접 접근하여 상태를 변경할 수 있습니다.

Reaction

Reaction은 MobX에서 상태 변화에 대해 자동으로 실행되는 함수를 의미합니다. Reaction은 autorun 함수를 사용하여 정의할 수 있으며, 관찰 가능한 데이터가 변경될 때마다 자동으로 실행됩니다. Reaction은 보통 UI 업데이트와 같은 부수효과를 처리하는 데 사용됩니다.

import { autorun } from 'mobx';

const ageLogger = autorun(() => {
  console.log(`Age: ${user.age}`);
});

위의 예제에서 ageLogger는 user 객체의 age 속성 변화를 추적하고, 해당 속성이 변경될 때마다 콘솔에 나이를 출력하는 Reaction입니다. Reaction은 상태 변화에 따라 자동으로 실행되므로, 변화에 따라 적절한 부수효과를 수행할 수 있습니다.

Computed

Computed는 MobX에서 고차 함수로서 사용되며, 계산된 값을 제공합니다. Computed는 computed 함수를 사용하여 정의할 수 있으며, 의존하는 Observable의 변화에 따라 자동으로 재계산됩니다.

import { computed } from 'mobx';

const isAdult = computed(() => {
  return user.age >= 18;
});

console.log(isAdult.get());

위의 예제에서 isAdult는 user 객체의 age 속성을 기반으로 성인 여부를 계산하는 Computed입니다. Computed는 의존하는 Observable의 속성이 변경될 때마다 자동으로 재계산되므로, 항상 최신 값을 제공할 수 있습니다.

이로써 MobX의 주요 개념인 Observable, Action, Reaction, Computed에 대해 알아보았습니다. 이러한 개념을 활용하여 MobX를 효과적으로 사용할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.