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.0 | loading 도입됨. |