문서
App Router 사용하기
loading.js

loading.js

loading 파일은 Suspense를 기반으로 한 즉각적인 로딩 상태를 생성할 수 있습니다.

기본적으로 이 파일은 서버 컴포넌트이지만, "use client" 지시문을 통해 클라이언트 컴포넌트로도 사용할 수 있습니다.

app/feed/loading.tsx
export default function Loading() {
  // 또는 사용자 정의 로딩 스켈레톤 컴포넌트
  return <p>Loading...</p>;
}
app/feed/loading.js
export default function Loading() {
  // 또는 사용자 정의 로딩 스켈레톤 컴포넌트
  return <p>Loading...</p>;
}

로딩 UI 컴포넌트는 어떤 매개변수도 받지 않습니다.

알아두면 좋은 점

  • 로딩 UI를 설계할 때, React 개발자 도구를 사용하여 Suspense 경계를 수동으로 토글하는 것이 도움이 될 수 있습니다.

버전 기록

버전변경 사항
v13.0.0loading 도입됨.