[FE-study] Error Boundary 구현하기

🛡️ Error Boundary란?

에러 바운더리는 자식 컴포넌트에서 발생한 에러를 잡아 UI를 대체 렌더링하는 컴포넌트이다.

일반적으로 React에서 에러가 발생하면 전체 앱이 깨지면서 하얀 화면이 나오는데,

Error Boundary를 사용하면 특정 영역만 fallback UI로 대체할 수 있다.

 

⚙️ 동작 방식

에러 바운더리는 자식 컴포넌트에서 발생한 에러를 감지하여

미리 정의한 UI를 렌더링한다.

 

에러 바운더리 구현을 위한 주요 메서드

• getDerivedStateFromError
  • 에러가 발생했을 때 호출
  • 상태를 변경하여 다음 렌더링에서 fallback UI를 보여줌
• componentDidCatch
  • 에러 정보를 로깅할 때 사용

 

🚀 구현

에러 바운더리는 반드시 클래스 컴포넌트로 구현해야 한다.

(함수형 컴포넌트로는 리액트 설계상 클래스 전용 생명주기 메서드를 사용할 수 없음)

그래서 편의를 위해 react-error-boundary 라이브러리를 많이 사용한다고 한다.

 

class ErrorBoundary extends Component {
// 생성자 > 컴포넌트가 처음 생성될 때 딱 한번 실행됨
  constructor(props) {
    super(props);
    this.state = { hasError: false }; // 초기 상태: 에러 없음
  }

  // 자식 컴포넌트에서 에러가 발생하면 호출됨
  // static > 정적 메서드 이 클래스 자체에 귀속된 규칙
  // 에러가 터졌을 때 리액트가 컴포넌트를 새로 그리기 전에 상태를 바꿔주어야 하기 때문에 사용함
  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 에러 화면이 보이도록 상태 업데이트
    return { hasError: true };
  }
  // 화면에 그려라라는 명령어 > 함수형 컴포넌트의 return문의 역할을 함
  render() {
    if (this.state.hasError) {
      // 에러 발생 시 보여줄 UI (fallback props로 전달)
      return this.props.fallback;;
    }

    // 에러가 없으면 자식 컴포넌트들을 그대로 렌더링
    return this.props.children;
  }
}