에러 바운더리: react-error-boundary

컴포넌트 트리에서 발생하는 렌더링 에러를 잡아 fallback을 표시합니다. Suspense와 함께 사용하여 선언적으로 로딩/에러 상태를 처리합니다.

import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function Page() {
  return (
    <ErrorBoundary
      fallbackRender={({ error, resetErrorBoundary }) => (
        <div>
          <p>에러: {error.message}</p>
          <button onClick={resetErrorBoundary}>다시 시도</button>
        </div>
      )}
    >
      <Suspense fallback={<div>로딩 중...</div>}>
        <Content id={1} />
      </Suspense>
    </ErrorBoundary>
  );
}