[react] JSX에서 Error Boundaries 다루기

26 Dec 2023

react

Error Boundaries는 React에서 UI의 일부를 wrapping하여 이벤트 핸들링 및 렌더링 도중 발생하는 JavaScript errors를 catch하는 방법을 제공하는데, 이는 하위 컴포넌트에서의 에러가 전체 앱을 중단시키는 것을 방지해준다.

Error Boundary 만들기

Error Boundary를 작성하려면 class component를 사용해야한다. 예를 들어, 다음과 같이 작성할 수 있다.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // log the error to the server
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

Error Boundary 사용하기

Error Boundary를 사용하려면, 다음과 같이 wrapping하여 사용할 수 있다.

import ErrorBoundary from './ErrorBoundary';

<ErrorBoundary>
  <YourComponent />
</ErrorBoundary>

Error Boundary의 제약사항

Error Boundary 내부에서 발생한 에러는 catch할 수 없다.
Error Boundary를 사용하는 컴포넌트는 class component로 작성되어야 한다.

Error Boundaries는 실제 서비스에서 런타임 에러를 관리하는 데 유용하며, 사용자 경험을 향상시키는 데 도움이 될 수 있다.

참고: React 공식 문서