React.lazy와 Suspense 중첩 오류

코드 스플리팅된 컴포넌트 로드 실패 시 전체 앱이 크래시합니다. 버그를 찾으세요:

JSX

const HeavyChart = React.lazy(() => import('./HeavyChart'));
const DataTable = React.lazy(() => import('./DataTable'));

function Dashboard() {
  return (
    <Suspense fallback={<p>로딩중...</p>}>
      <div>
        <HeavyChart />
        <DataTable />
      </div>
    </Suspense>
  );
}

답변

div로 lazy 컴포넌트를 감싸면 코드 스플리팅이 작동하지 않음 lazy 컴포넌트의 import 실패 시 에러를 처리할 ErrorBoundary가 없음 React.lazy로 두 개의 컴포넌트를 동시에 로드하면 안 됨 Suspense의 fallback에 컴포넌트가 아닌 JSX를 전달하면 안 됨

로그인 후 제출하기