React - 에러 바운더리

김서영·2024년 5월 31일

CS 스터디 - React

목록 보기

19/28

React 에러 바운더리

React의 에러 바운더리란?

React에서 자식 컴포넌트 트리의 JavaScript 오류를 잡아내고, 그 오류로 인해 발생하는 UI의 붕괴를 방지하는 데 사용되는 컴포넌트

=> 트리 대신 폴백 UI를 보여주는 React 컴포넌트로 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다.
=> 에러 바운더리를 설정해주면 바운더리 내의 컴포넌트와 그 하위 컴포넌트에서 발생하는 에러를 감지해서 fallback UI를 띄어줄 수 있다.

에러 바운더리 사용방법

1. 에러 바운더리 컴포넌트 작성

ErrorBoundary 컴포넌트는 getDerivedStateFromError와 componentDidCatch 생명주기 메서드를 구현하여 자식 컴포넌트 트리에서 발생하는 오류를 처리한다.
오류가 발생하면 hasError 상태를 true로 설정하여 폴백 UI를 표시한다.

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 오류 로깅 서비스에 오류를 기록할 수 있습니다.
    console.error("Error caught by ErrorBoundary: ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스터마이즈할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

2. 에러 바운더리 사용

ErrorBoundary를 사용하여 MyComponent를 감싼다.
이로써 MyComponent에서 오류가 발생하더라도 전체 애플리케이션이 중단되지 않고 폴백 UI가 표시된다.

import React from 'react';
import ReactDOM from 'react-dom';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

const App = () => (
  <div>
    <h1>My App</h1>
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

3. 오류를 발생시키는 자식 컴포넌트

MyComponent는 의도적으로 오류를 발생시킨다.
이 오류는 ErrorBoundary에 의해 잡혀서 폴백 UI가 표시된다.

import React from 'react';

class MyComponent extends React.Component {
  render() {
    // 의도적으로 오류를 발생시킵니다.
    throw new Error('I crashed!');
    return <div>My Component</div>;
  }
}

export default MyComponent;