Loading Skeletons Scoping — 로딩 스켈레톤 범위 지정
기본적으로 loading.tsx는 모든 하위 라우트에 적용됩니다. Route Group을 사용하면 loading.tsx의 적용 범위를 특정 라우트로 제한할 수 있습니다.
파일 구조:
loading-skeletons/
├── page.tsx ← 이 페이지
└── dashboard/
├── layout.tsx ← Dashboard layout
├── (overview)/
│ ├── loading.tsx ← overview에만 적용
│ └── page.tsx ← 느린 페이지 (2초)
└── settings/
└── page.tsx ← loading.tsx 없음 (즉시 로딩)(overview) Route Group 안에 loading.tsx를 배치하면, 해당 그룹의 라우트에만 스켈레톤이 적용됩니다. settings 페이지는 이 그룹 바깥에 있으므로 loading.tsx의 영향을 받지 않습니다.
핵심 파일 코드
// demo/nextjs/16.1.6/project-structure/loading-skeletons/page.tsx
export default function Page() {
// 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}