티스토리 뷰
Page and Layout
1. Page
페이지는 경로에 대한 고유한 UI이다.page.js 파일에서 export 한다.
파일 구조
app ㄴ page.js ㄴ dashboard ㄴ page.js 코드
// app/page.js // -> '/' URL의 UI가 된다. export default function Page() { return <h1>Hi! Home page!</h1>; } // app/dashboard/page.js // -> '/dashboard' URL의 UI가 된다. export default function Page() { return <h1>Hi! Dashboard page!</h1>; } 2. Layout
Layout은 여러 Page 같에 공유되는 UI이다.
레이아웃은 네비게이션 간에 상태를 유지하고 대화형을 유지하며 다시 렌더링되지 않는다. 그리고 중첩될 수 있다.
- children props를 사용.
파일 구조
app ㄴ layout.ts ㄴ page.ts ㄴ dashboard ㄴ layout.ts ㄴ page.ts 코드
// app/dashboard/layout.ts export default function DashboardLayout({ children }: { children: React.ReactNode }) { return ( <section> <nav></nav> {children} </section> ) } 2.1 RootLayout
app 디렉토리의 최상위 수준에서 정의되며 모든 경로에 적용된다.
코드
// app/layout.ts export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ) } 2.2 중첩 레이아웃
파일 구조
app
ㄴ layout.ts
ㄴ page.ts
ㄴ dashboard
ㄴ layout.ts
ㄴ page.ts루트 레이아웃 (app/layout.ts)에 대시보드 레이아웃 (app/dashboard/layout.ts)가 중첩되어진다.
(옵시디언에서 작성되었습니다.)
'[개발] > Next - 공식문서' 카테고리의 다른 글
| [Routing] 08 Paraller Routes (0) | 2023.12.16 |
|---|---|
| [Routing] 04 경로 그룹 (Route Groups) (0) | 2023.12.16 |