Nested Layout

~20 min · layout, nesting, template

Level 0Curious

0 XP0/68 lessons0/11 achievements

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

Folder 따라 layout 이 compose

각 segment 가 자기 layout.tsx 를 선언할 수 있고, 자동으로 nest 돼: child layout 이 parent layout 안에서 render. Render tree 가 folder tree 그대로야.

app/layout.tsx                       → 모든 것 wrap
  app/dashboard/layout.tsx           → /dashboard/* wrap
    app/dashboard/settings/page.tsx  → 두 layout 안에서 render

뭐가 살아남고 뭐가 re-render 하는지

/dashboard/settings 에서 /dashboard/billing 으로 navigate 하면 page 만 swap, 두 layout 다 살아 있음. /dashboard/settings 에서 /marketing/pricing 으로 가면 dashboard layout unmount 되고 marketing 을 wrap 하는 layout mount.

`layout.tsx` vs `template.tsx`

Default 로 layout.tsx 써. Navigation 마다 fresh state 또는 enter/exit 애니메이션 필요할 때만 template.tsx — re-mount 함. Folder 안 이름만 다르고 props 는 동일.

Code

3-level nesting 실제로·tsx

// app/layout.tsx — site chrome
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en"><body>
      <SiteNav />
      {children}
    </body></html>
  );
}

// app/(app)/layout.tsx — app chrome (route group; URL 에 /(app)/ 안 들어감)
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return <div className="flex"><AppSidebar /><div className="flex-1">{children}</div></div>;
}

// app/(app)/dashboard/layout.tsx — dashboard chrome
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return <div className="p-6 space-y-4"><DashboardTabs />{children}</div>;
}

// app/(app)/dashboard/billing/page.tsx — 위 셋 다에 wrap

Re-mount 의미가 필요하면 template·tsx

// app/(app)/dashboard/template.tsx — navigation 마다 fresh instance
'use client';
import { motion } from 'framer-motion';

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.18 }}
    >
      {children}
    </motion.div>
  );
}

External links

Exercise

지난 lesson 에서 만든 dashboard 에 3-level nested layout 추가. React DevTools 로 가장 깊은 page 바뀔 때 parent layout 들 unmount 안 하는지 확인.

Progress

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

← Previouslayout.tsx — 공유 UI Next →Dynamic Route

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

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

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

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