MobX와 함께 사용되는 오류 및 예외 처리 패턴

17 Oct 2023

mobx

소개

MobX는 상태 관리 라이브러리로, React와 함께 사용될 때 많은 개발자들에게 인기가 있습니다. 그러나 MobX를 사용하는 동안 발생할 수 있는 오류와 예외 처리 방법에 대해서 알아보겠습니다.

1. MobX 오류: `Reaction already running`

이 오류는 MobX 반응(Reaction)이 이미 실행 중인 상태에서 다시 실행되려 할 때 발생합니다.

오류 원인

이 오류는 MobX 반응을 다시 시작하려고 할 때 발생합니다. 예를 들어, autorun 데코레이터 또는 reaction 함수를 사용하여 반응을 생성하고, 반응 내부에서 상태 변경을 감지하고 다시 실행하려고 할 때 발생할 수 있습니다.

해결 방법

이 오류를 해결하기 위해서는 반응을 다시 시작하기 전에 중단시켜야 합니다. MobX에서는 reaction 함수를 사용하여 반응을 생성할 때 반환되는 객체에 dispose() 메서드를 사용하여 반응을 중단할 수 있습니다. 따라서 반응을 중단하고 다시 시작하기 전에 dispose() 메서드를 호출하여 오류를 예방할 수 있습니다.

import { observable, reaction } from 'mobx';

const data = observable({
  value: ''
});

const reactionRef = reaction(
  () => data.value,
  (value) => {
    console.log(value);
  }
);

// 반응 중단
reactionRef.dispose();

// 반응 다시 시작
reactionRef = reaction(
  () => data.value,
  (value) => {
    console.log(value);
  }
);

2. 예외 처리 패턴

2.1. `try-catch` 문 사용

MobX에서 예외 처리를 위해 기본적으로 JavaScript에서 제공하는 try-catch 문을 사용할 수 있습니다. 이 방법은 반응 내부에서 발생하는 모든 예외를 캐치하고 처리할 수 있습니다.

import { observable, computed } from 'mobx';

class Store {
  @observable value = '';

  @computed get length() {
    try {
      return this.value.length;
    } catch (error) {
      console.error('An error occurred:', error.message);
      return 0;
    }
  }
}

2.2. `runInAction` 함수 사용

MobX에서는 runInAction 함수를 사용하여 오류 발생 시 예외를 처리할 수도 있습니다.

import { observable, runInAction } from 'mobx';

class Store {
  @observable value = '';

  updateValue(newValue) {
    try {
      // 상태 변경 코드
      runInAction(() => {
        this.value = newValue;
      });
    } catch (error) {
      console.error('An error occurred:', error.message);
    }
  }
}

결론

MobX를 사용하면서 발생할 수 있는 오류와 예외 처리 패턴에 대해 알아보았습니다. Reaction already running 오류를 해결하고 예외 처리를 통해 안정적인 애플리케이션 개발에 도움이 될 것입니다. MobX 공식 문서와 커뮤니티 리소스에서 더 많은 정보를 찾아보세요.

소개

1. MobX 오류: Reaction already running