layout.tsx — 공유 UI

~20 min · layout, persistence, root layout

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Layout 은 wrap 하고 살아남아

layout.tsx 는 자기 segment 와 그 아래 모든 route 를 wrap 해. 핵심 속성: navigation 너머로 살아남는다. 사용자가 sibling page 사이로 클릭해도 layout component 는 unmount 안 함. Sidebar, navigation, layout 안 state 가 다 살아 있어.

필수 root layout

Next.js app 마다 app/layout.tsx 가 있어야 해. 과 tag 만들어야 함 — 다른 어디서도 못 만듦. Global font, language attribute, body class 가 사는 자리.

Layout props

Layout 은 children (nested page 또는 layout) 받고, v15+ 에선 dynamic segment 안에 있을 때 params 가 Promise 로 옴.

Layout 이 못 하는 것

Layout 은 searchParams 안 받음. Layout 이 query string 에 의존하면 구조 다시 짜 — query string 으로 들어오는 data 를 layout 말고 page 안 Server Component 로 패스.

Code

필수 root layout·tsx

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="min-h-screen bg-white text-gray-900 antialiased">
        <SiteNav />
        <main className="mx-auto max-w-5xl p-6">{children}</main>
        <SiteFooter />
      </body>
    </html>
  );
}

Awaited params 의 nested layout·tsx

// app/team/[teamId]/layout.tsx
export default async function TeamLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ teamId: string }>;
}) {
  const { teamId } = await params;
  return (
    <div className="grid grid-cols-[200px_1fr] gap-6">
      <TeamSidebar teamId={teamId} />
      {children}
    </div>
  );
}

External links

Layout file convention

Exercise

/dashboard/… route 에 sidebar + nav link 가진 layout 추가해. 두 child page 사이로 클릭하면서 sidebar 의 local state (예: collapse toggle) 가 살아남는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← Previouspage.tsx — Route Component Next →Nested Layout

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.