데이터 및 코드 경계를 위한 Suspense

환영합니다

Suspense란 무엇입니까

<Suspense fallback={<Spinner />}>
  <MyComponent />
</Suspense>

React.lazy와 함께 사용하는 Suspense

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

<Suspense fallback={<p>Loading chart...</p>}>
  <HeavyChart />
</Suspense>

하나의 경계 아래에 있는 여러 lazy 컴포넌트

중첩된 Suspense 경계

<Suspense fallback={<PageSkeleton />}>
  <Header />
  <Suspense fallback={<ChartSkeleton />}>
    <LazyChart />
  </Suspense>
</Suspense>

데이터 라이브러리와 함께 사용하는 Suspense

const { data } = useQuery({ queryKey: ['users'], queryFn: fetchUsers,
  suspense: true }); // component suspends until data is ready
// No loading check needed — data is always available here

React 19의 use() 훅

import { use } from 'react';

function Profile({ userPromise }) {
  const user = use(userPromise); // suspends until resolved
  return <p>{user.name}</p>;
}

순서가 있는 표시를 위한 SuspenseList

Suspense는 오류를 감지하지 않습니다

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Spinner />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>

대체 UI로 사용하는 스켈레톤 화면

빠른 확인

복습

과정 완료