Skip to main content

이 영역이 layout.tsx입니다 — 페이지 이동 시에도 유지됩니다

아래 링크를 클릭해도 이 헤더와 사이드바는 리렌더링되지 않습니다.

layout.tsx 데모

routing-files/layout-demo/
├── layout.tsx    ← 공유 레이아웃 (이 파랑 테두리)
├── page.tsx      ← 현재 페이지 (홈)
├── about/
│   └── page.tsx  ← 소개 페이지
└── contact/
    └── page.tsx  ← 연락처 페이지

핵심 코드

// layout.tsx
interface LayoutProps {
  children: React.ReactNode;
}

const DashboardLayout = (props: LayoutProps) => {
  const { children } = props;

  return (
    <div>
      <nav>사이드바 — 항상 유지됨</nav>
      <main>{children}</main>
    </div>
  );
};

export default DashboardLayout;

설명

  • layout.tsx는 하위 라우트를 children prop으로 감쌉니다.
  • 페이지 간 이동 시에도 layout은 리렌더링되지 않고 상태가 유지됩니다.
  • 위의 파랑 테두리 영역이 layout.tsx이며, 사이드바 링크를 클릭해도 유지됩니다.
  • 루트 layout.tsx는 필수이며 <html>, <body> 태그를 포함해야 합니다.

왼쪽 사이드바에서 "소개" 또는 "연락처"를 클릭하여 layout이 유지되는 것을 확인하세요.

← 목록으로 돌아가기