MobX를 활용한 데이터 트랜스포메이션

17 Oct 2023

mobx

소개

MobX는 JavaScript 애플리케이션의 상태 관리를 간편하게 해주는 라이브러리입니다. 이 라이브러리를 사용하면 상태 변화를 자동으로 관찰하고, 해당 변화에 맞게 애플리케이션의 다른 부분을 업데이트할 수 있습니다. 이번 글에서는 MobX를 사용해 데이터 트랜스포메이션을 어떻게 수행할 수 있는지 살펴보겠습니다.

MobX의 기본 개념

MobX는 기존의 상태 관리 패턴인 Observer 패턴과 Reactive 프로그래밍의 아이디어를 결합한 방식으로 작동합니다. MobX에서는 상태를 Observable로 정의하고, 해당 상태를 관찰하는 Reactions를 정의할 수 있습니다. 이렇게 정의된 Observable과 Reactions은 MobX에 의해 자동으로 관리되며, 상태 변화에 따라 자동으로 업데이트 됩니다.

데이터 트랜스포메이션을 위한 MobX 활용

데이터 트랜스포메이션은 주어진 데이터를 다른 형태로 변환하는 과정을 말합니다. MobX를 활용하면 데이터 트랜스포메이션을 간편하게 수행할 수 있습니다. 아래는 간단한 예제 코드입니다.

import { observable, computed } from 'mobx';

class Store {
  @observable users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
  ];

  @computed get totalAge() {
    return this.users.reduce((acc, user) => acc + user.age, 0);
  }

  @computed get averageAge() {
    return this.totalAge / this.users.length;
  }
}

const store = new Store();
console.log(store.totalAge); // 출력: 90
console.log(store.averageAge); // 출력: 30

위 예제에서 Store 클래스는 users라는 Observable 상태를 가지고 있습니다. 이 Observable은 배열 형태의 사용자 객체들을 담고 있습니다. totalAge와 averageAge는 computed로 정의된 getter 메서드로, users 배열의 합계 나이와 평균 나이를 계산한 값을 반환합니다.

위 예제 코드에서는 Store 클래스의 users 배열이 변경되면 totalAge와 averageAge 값도 자동으로 업데이트 됩니다. 이는 MobX가 users 배열을 관찰하고 있기 때문입니다.

마무리

MobX를 사용하면 데이터 트랜스포메이션을 간편하게 수행할 수 있습니다. MobX의 Observable과 computed를 적절히 활용하면 데이터의 변화에 따라 자동으로 연관된 값들을 업데이트할 수 있습니다. 이로 인해 코드의 가독성과 유지보수성을 높일 수 있습니다. 만약 상태 관리가 필요한 프로젝트라면 MobX를 고려해보세요.

참고 자료:

#MobX #데이터트랜스포메이션