React Error Boundary - 에러 처리와 사용자 경험 개선

React에서 컴포넌트 렌더링 중 발생한 에러를 우아하게 처리하고, 앱 전체가 크래시되지 않도록 보호하는 방법을 Error Boundary로 구현할 수 있습니다.
이 글에서는 Error Boundary의 기본 개념과 실무에서 활용하는 패턴을 정리합니다.

---

1. Error Boundary란?

Error Boundary는 클래스 컴포넌트로만 구현 가능하며, componentDidCatch와 static getDerivedStateFromError를 사용합니다.

class ErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback?: React.ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

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

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("Error caught:", error, errorInfo);
    // 에러 로깅 서비스로 전송
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <div>에러가 발생했습니다.</>;
    }
     ..;
  }
}