MobX를 활용한 에러 핸들링 패턴

17 Oct 2023

mobx

에러 핸들링은 모든 소프트웨어 개발에서 중요한 요소입니다. 오류가 발생하는 경우 사용자 경험을 해치지 않고 적절하게 처리하기 위해서는 효율적인 에러 핸들링 패턴이 필요합니다. 이번 포스트에서는 MobX를 활용한 에러 핸들링 패턴에 대해 알아보겠습니다.

MobX란?

MobX는 상태 관리 라이브러리로, React와 같은 프레임워크와 함께 사용할 수 있습니다. MobX는 애플리케이션의 데이터 상태를 관리하고, 상태의 변화를 감지하여 자동으로 업데이트하는 기능을 제공합니다. 이러한 특징을 활용하여 에러 핸들링을 효과적으로 구현할 수 있습니다.

에러 핸들링 패턴 구성 요소

MobX를 활용한 에러 핸들링 패턴은 아래와 같은 구성 요소로 이루어집니다:

에러 스토어(Error Store): 애플리케이션 전체에서 발생하는 에러를 관리하는 스토어입니다. 에러 스토어는 MobX observable로 구현되어야 하며, 에러를 저장하고 수정하는 기능을 제공합니다.
에러 컴포넌트(Error Component): 화면에 에러를 표시하는 컴포넌트입니다. 에러 스토어의 상태를 구독하여 에러가 발생하면 화면에 표시하고, 에러가 해결되면 에러를 숨깁니다.

에러 핸들링 패턴 구현 예제

아래는 MobX를 활용한 에러 핸들링 패턴의 구현 예제입니다. JavaScript와 React를 사용한 코드입니다.

// ErrorStore.js

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

class ErrorStore {
  error = null;

  constructor() {
    makeObservable(this, {
      error: observable,
      setError: action,
      clearError: action,
    });
  }

  setError(error) {
    this.error = error;
  }

  clearError() {
    this.error = null;
  }
}

export default ErrorStore;

// ErrorComponent.jsx

import React from 'react';
import { observer } from 'mobx-react-lite';
import { useErrorStore } from './ErrorStoreProvider';

const ErrorComponent = observer(() => {
  const errorStore = useErrorStore();

  if (errorStore.error) {
    return <div className="error">{errorStore.error}</div>;
  }

  return null;
});

export default ErrorComponent;

// ErrorStoreProvider.jsx

import React from 'react';
import ErrorStore from './ErrorStore';

const errorStoreContext = React.createContext(null);

export const ErrorStoreProvider = ({ children }) => {
  const errorStore = new ErrorStore();

  return (
    <errorStoreContext.Provider value={errorStore}>
      {children}
    </errorStoreContext.Provider>
  );
};

export const useErrorStore = () => {
  const errorStore = React.useContext(errorStoreContext);

  if (!errorStore) {
    throw new Error('ErrorStoreProvider not found.');
  }

  return errorStore;
};

위의 코드는 에러 스토어 ErrorStore를 생성하고, setError 메서드로 에러를 설정하고 clearError 메서드로 에러를 초기화합니다. 그리고 ErrorComponent에서는 ErrorStore를 구독하여 에러가 발생하면 화면에 표시하고, 에러가 해결되면 숨깁니다.

결론

MobX를 활용한 에러 핸들링 패턴은 애플리케이션 전체에서 발생하는 에러를 효과적으로 관리할 수 있습니다. MobX의 상태 관리 기능과 함께 사용하여 사용자 경험을 향상시키고 개발자의 작업 효율성을 높일 수 있습니다.

참고 자료: