MobX를 이용한 효율적인 데이터 구조 설계

17 Oct 2023

mobx

MobX는 JavaScript 애플리케이션에서 상태 관리를 간편하게 해주는 라이브러리입니다. 데이터의 상태 변화를 감지하고 자동으로 업데이트를 수행하여 효율적인 데이터 구조 설계를 도와줍니다.

MobX의 주요 개념

Observables

Observables는 MobX에서 관리되는 상태를 나타내는 객체입니다. 이 객체들은 데이터 변화를 감지하고, 이를 구독(subscribe)하는 다른 객체에게 변화를 알립니다.

import { observable } from "mobx";

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

위의 예제에서 user는 observable 함수로 생성된 객체입니다. name과 age라는 속성은 MobX에 의해 관리되는 상태입니다.

Actions

Actions는 상태를 변경하는 메소드를 의미합니다. MobX는 어떤 액션이 상태를 직접 변경하는지 추적하여 변경된 상태를 구독 중인 객체에게 알립니다.

import { action } from "mobx";

const userStore = observable({
  name: "John",
  age: 30,
  
  // action to update user's name
  updateName: action(function (newName) {
    this.name = newName;
  }),
});

위의 예제에서 updateName 메소드는 action 데코레이터로 감싸져 있습니다. 이렇게 하면 해당 메소드가 상태를 변경할 때 MobX가 자동으로 액션을 추적합니다.

Reactions

Reactions는 MobX에서 상태 변화를 감지하여 어떤 작업을 수행하는 함수입니다. 주로 UI 업데이트에 사용되며, 상태가 변경될 때마다 자동으로 실행됩니다.

import { reaction, observable } from "mobx";

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

reaction(
  () => user.age,
  (age) => {
    console.log(`User age is now ${age}`);
  }
);

위의 예제에서 reaction 함수는 첫 번째 인자로 상태 변화를 감지할 소스를, 두 번째 인자로 상태가 변경될 때 호출되는 콜백 함수를 받습니다.

MobX를 이용한 데이터 구조 설계의 장점

간단한 코드: MobX는 상태 관리를 간소화하여 코드의 복잡도를 줄여줍니다. 상태 변경을 자동으로 처리하기 때문에 개발자는 간단한 액션 메소드만 작성하면 됩니다.
리액티브 프로그래밍: MobX는 리액티브 프로그래밍 패러다임을 따르므로 데이터의 상태 변화를 쉽게 추적할 수 있습니다. 이를 통해 UI 업데이트와 같은 작업을 간편하게 수행할 수 있습니다.
높은 성능: MobX는 변경된 상태에 대한 업데이트만 수행하기 때문에 효율적인 렌더링을 제공합니다. 이는 대규모 애플리케이션에서도 빠른 성능을 보장합니다.

결론

MobX를 이용한 데이터 구조 설계는 JavaScript 애플리케이션의 상태 관리를 간편하고 효율적으로 수행할 수 있는 방법입니다. Observables, Actions, Reactions를 적절히 활용하여 코드의 가독성과 유지 보수성을 높일 수 있습니다. 동시에 높은 성능을 제공하여 사용자 경험을 향상시킬 수 있습니다.

#MobX #상태관리