ErrorBoundary

ErrorBoundary
에러 바운더리
Error Boundary는 React Core 기능이다.
React 16(2017)부터 공식적으로 도입된 개념이다.
즉, React의 모든 프로젝트(CRA, Vite, Gatsby, Remix 등)에서 쓸 수 있다.
Error Boundary(에러 바운더리)는 React 컴포넌트 트리 안에서 렌더링 도중 발생한 에러를 감지해서, 앱 전체가 죽지 않도록 ‘대체 UI(fallback)’를 보여주는 보호 컴포넌트이다.
컴포넌트 트리의 오류를 감싸서 안전하게 격리(fallback)하는 방패막이

사용법

React에서는 클래스 컴포넌트로 Error Boundary를 만들어야 한다.(함수 컴포넌트에서는 아직 공식 지원되지 않음 → 대신 훅 기반 라이브러리로 대체 가능: react-error-boundary)

import React from "react";

class ErrorBoundary extends React.Component<
  { fallback: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error) {
    // 에러 감지 시 state 변경 → fallback 렌더링
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error("Error caught by boundary:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

사용 예시

import React from "react";
import ErrorBoundary from "./ErrorBoundary";
import BrokenComponent from "./BrokenComponent";

export default function App() {
  return (
    <ErrorBoundary fallback={<h2>문제가 발생했습니다 😥</h2>}>
      <BrokenComponent />
    </ErrorBoundary>
  );
}

BrokenComponent가 에러를 던지면, 앱 전체가 죽지 않고 fallback UI만 표시된다.