MobX는 JavaScript 애플리케이션의 상태 관리를 간단하게 만들어주는 라이브러리입니다. 이번 글에서는 MobX의 컴퓨티드(Computed) 기능에 대해 알아보겠습니다.

컴퓨티드란?

컴퓨티드는 MobX에서 제공하는 중요한 개념으로, 기존 상태 값을 가공하여 필요한 값을 도출하는 함수입니다. 컴퓨티드는 값의 변화에 따라 자동으로 업데이트되며, 의존하는 값을 추적하여 자동으로 재계산됩니다. 이를 통해 애플리케이션의 상태를 자동으로 동기화할 수 있습니다.

컴퓨티드 사용하기

예를 들어, 간단한 쇼핑 카트 애플리케이션의 상태를 관리한다고 가정해봅시다. 상품의 가격과 수량을 곱한 총 가격을 계산하는 함수를 작성해보겠습니다.

import { observable, computed } from 'mobx';

class ShoppingCart {
  @observable price = 10;
  @observable quantity = 2;

  @computed get total() {
    return this.price * this.quantity;
  }
}

const cart = new ShoppingCart();

console.log(cart.total); // 20

cart.price = 15;
console.log(cart.total); // 30

cart.quantity = 3;
console.log(cart.total); // 45

위 예제에서는 @observable 데코레이터를 사용하여 price와 quantity라는 속성을 정의하였습니다. 그리고 @computed 데코레이터를 사용하여 total이라는 속성을 정의한 후, 이 속성은 price와 quantity를 의존으로 갖고 있습니다.

상품의 가격(price)이나 수량(quantity)이 변경될 때마다 total은 자동으로 재계산됩니다. 따라서, cart.total을 호출할 때마다 최신의 총 가격을 얻을 수 있습니다.

정리

MobX의 컴퓨티드는 상태 값을 도출하는 함수로, 값의 변화에 따라 자동으로 업데이트됩니다. 이를 통해 애플리케이션의 상태를 자동으로 동기화할 수 있어 개발자에게 편리함을 제공합니다.

더 자세한 정보는 MobX 문서를 참고하시기 바랍니다.