Component Hierarchy — 컴포넌트 계층 구조

Next.js App Router에서 특수 파일들은 고정된 계층 구조로 렌더링됩니다. layout이 가장 바깥에서 감싸고, page가 가장 안쪽에 위치합니다.

파일 구조:

component-hierarchy/
├── layout.tsx     ← 1단계: Layout
├── template.tsx   ← 2단계: Template
├── error.tsx      ← 3단계: Error Boundary
├── loading.tsx    ← 4단계: Suspense Boundary
└── page.tsx       ← 5단계: Page (이 페이지)

React 컴포넌트로 표현하면:

<Layout>
  <Template>
    <ErrorBoundary fallback={<Error />}>
      <Suspense fallback={<Loading />}>
        <Page />
      </Suspense>
    </ErrorBoundary>
  </Template>
</Layout>

layout.tsx — 상태 유지

네비게이션 간 리렌더링되지 않고 상태가 유지됩니다. 이 페이지 주변의 파란 테두리가 layout입니다.

template.tsx — 매번 리마운트

layout과 유사하지만 매 네비게이션마다 새 인스턴스를 생성합니다. 카운터가 리셋되는 것으로 확인할 수 있습니다.

error.tsx — Error Boundary

하위 컴포넌트에서 에러 발생 시 fallback UI를 표시합니다.

loading.tsx — Suspense Boundary

페이지 로딩 중 fallback UI를 표시합니다. 아래 링크를 클릭하면 동작을 확인할 수 있습니다.

loading.tsx의 동작을 확인하려면 아래 느린 페이지를 방문하세요:

느린 페이지 방문 (3초 지연)

← 스터디 페이지로 돌아가기

핵심 파일 코드

// demo/nextjs/16.1.6/project-structure/component-hierarchy/page.tsx
export default function Page() {
    // 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}