1. Layout
: 필요한 것을 복사 붙여넣기 없이 어디서나 사용할 수 있는 시스템
2. Layout 적용 과정
- layout component에 있는 export된 default component를 렌더링 → 실제 렌더링
- 이동하려는 페이지를 URL을 통해 인식 → component(layout component의 children prop)를 렌더링
- TypeScript) children의 타입이 ReactNode
- children이 실제 내가 이동하려는 페이지
import Navigation from "./components/navigation" export const metadata = { title: 'Next.js', description: 'Generated by Next.js', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body> <Navigation /> {children} </body> </html> ) }
3. 특정 Layout 만들기
- 해당 URL 폴더에 layout.tsx 파일 만들기
- 기존의 layout.tsx 파일 복사 붙여넣기 해서 틀 잡고 수정하기
export default function AboutUsLayout({ children, }: { children: React.ReactNode }) { return ( <div> {children} © Next JS is great! </div> ) }
- 해당 URL 내에 페이지 만들기
- 새로운 페이지의 layout이 없는 경우 상위 폴더의 layout이 적용되어있음
export default function Sales() { return ( <div> <h1>Sales jobs</h1> </div> ); }
- Layout은 중첩이 가능함
Share article
