[javascript] MobX와 컴포넌트 상태 관리

04 Dec 2023

javascript

컴포넌트 기반의 웹 개발에서 상태 관리는 매우 중요한 부분입니다. 상태 관리를 효율적으로 처리하지 않으면 애플리케이션의 복잡도가 증가하고 유지보수가 어려워질 수 있습니다. MobX는 JavaScript 애플리케이션의 상태 관리를 간단하고 효율적으로 처리할 수 있는 도구로 널리 사용되고 있습니다.

MobX란?

MobX는 JavaScript 애플리케이션의 상태 관리를 위한 상태 관리 라이브러리입니다. MobX는 단방향 데이터 플로우를 쉽게 구현하고, 반응형으로 상태 변화를 관찰하고, 필요한 경우 자동으로 반응을 처리할 수 있습니다.

MobX 사용하기

다음은 간단한 MobX 사용 예제입니다.

import { observable, action, computed } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action increment() {
    this.count++;
  }

  @action decrement() {
    this.count--;
  }

  @computed get doubledCount() {
    return this.count * 2;
  }
}

const counterStore = new CounterStore();

counterStore.increment();
console.log(counterStore.count); // 1
console.log(counterStore.doubledCount); // 2

counterStore.decrement();
console.log(counterStore.count); // 0
console.log(counterStore.doubledCount); // 0

위 예제에서 observable, action, computed는 MobX의 주요 데코레이터입니다. @observable로 선언한 count 속성은 MobX에서 관찰 가능한 상태를 나타내며, @action으로 선언한 increment와 decrement 메서드는 count 상태를 변경하는 역할을 합니다. @computed로 정의한 doubledCount는 count 상태를 기반으로 계산되는 값을 반환하는 계산된 속성입니다.

MobX와 컴포넌트 상태 관리

MobX는 React나 Vue와 같은 컴포넌트 기반 프레임워크와 함께 사용하기에 적합한 상태 관리 라이브러리입니다. MobX를 사용하여 컴포넌트의 상태를 관리하면 상태 변경에 따른 자동 업데이트가 가능해지고, 컴포넌트의 재렌더링을 최소화할 수 있습니다.

import { observer } from 'mobx-react';

@observer
class CounterComponent {
  render() {
    return (
      <div>
        <p>Count: {counterStore.count}</p>
        <button onClick={counterStore.increment}>+</button>
        <button onClick={counterStore.decrement}>-</button>
        <p>Doubled Count: {counterStore.doubledCount}</p>
      </div>
    );
  }
}

위 예제에서는 observer 데코레이터를 사용하여 CounterComponent를 관찰 가능한 컴포넌트로 만들었습니다. 이렇게 하면 MobX가 컴포넌트의 상태를 추적하고, 변경이 있을 때 자동으로 컴포넌트를 업데이트합니다.

결론

MobX는 컴포넌트 기반의 상태 관리를 효율적으로 처리할 수 있는 도구입니다. MobX는 JavaScript 애플리케이션의 복잡도를 낮추고 유지보수를 용이하게 하기 위한 강력한 도구입니다. MobX를 사용하여 코드를 간결하고 효율적으로 유지관리하는 것은 개발자에게 큰 이점을 제공할 수 있습니다.

MobX란?

MobX 사용하기

MobX와 컴포넌트 상태 관리

결론

참고 자료