MobX는 JavaScript 애플리케이션의 상태 관리를 위한 강력한 라이브러리입니다. 그러나 많은 데이터를 다루고 복잡한 앱에서는 성능 이슈가 발생할 수 있습니다. 이 문제를 해결하기 위해 MobX의 성능을 튜닝하는 방법을 알아보겠습니다.

1. Computed 속성 최적화

Computed 속성은 MobX에서 자주 사용되는 기능 중 하나입니다. 그러나 계산된 값이 자주 변경되지 않는 경우에도 매번 다시 계산되기 때문에 성능 저하의 원인이 될 수 있습니다. 이를 방지하기 위해 computed({ keepAlive: true }) 옵션을 사용하여 계산된 속성을 최적화할 수 있습니다.

import { computed } from 'mobx';

class Store {
  @computed({ keepAlive: true })
  get expensiveComputed() {
    // 계산 비용이 높은 작업
    return // 계산 결과
  }
}

2. Reaction 개수 제한

Reaction은 MobX에서 상태 변화에 따라 자동으로 반응하는 기능입니다. 그러나 너무 많은 Reaction을 설정하면 성능에 부정적인 영향을 줄 수 있습니다. 따라서, 반응이 필요한 경우에만 Reaction을 사용하고 최적화를 위해 Reaction의 개수를 제한하는 것이 좋습니다.

import { reaction } from 'mobx';

class Store {
  constructor() {
    this.reaction1 = reaction(() => this.observableValue, () => {
      // Reaction 동작
    });

    this.reaction2 = reaction(() => this.anotherObservableValue, () => {
      // Reaction 동작
    });
  }
}

3. batch 함수 사용

MobX는 기본적으로 변경된 상태에 대한 리액션을 자동으로 처리합니다. 그러나 많은 변경이 발생할 경우 이러한 리액션들이 중복해서 실행될 수 있습니다. 이를 방지하기 위해 batch 함수를 사용하여 여러 상태 변경을 단일 리액션으로 묶을 수 있습니다.

import { batch } from 'mobx';

class Store {
  updateMultipleValues() {
    batch(() => {
      // 여러 값 변경
    });
  }
}

4. 적절한 컴포넌트 렌더링

MobX는 React와 함께 사용할 때 효과적입니다. 그러나 잘못된 컴포넌트 렌더링 설정은 성능 저하를 초래할 수 있습니다. MobX의 observer를 사용할 때 매번 렌더링되지 않아야 하는 컴포넌트에는 shouldComponentUpdate 또는 React.memo를 활용하여 불필요한 렌더링을 방지할 수 있습니다.

import { observer } from 'mobx-react';

@observer
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 변경된 값이 없는 경우 렌더링 방지
    return this.props.value !== nextProps.value;
  }

  render() {
    // 렌더링 로직
  }
}

위에서 제시한 튜닝 방법을 활용하여 MobX 애플리케이션의 성능을 개선할 수 있습니다. 그러나 성능 개선을 위해서는 애플리케이션의 특성을 파악하고 적절한 방법을 선택하는 것이 중요합니다.

참고 자료

• MobX 공식 문서