강의 14~16번
레이아웃
- 페이지는 라우트에 따라 고유한 UI이다
- 레이아웃은 앱의 여러 페이지들 사이에서 공유 되어진다
레아아웃 만드는 법
- 레이아웃은 layout.js 또는 layout.tsx 파일에 기본으로 내보내진(export) React 컴포넌트를 통해 정의할 수 있다.
- 이 컴포넌트는 children prop을 포함해야 하며, 이 prop은 렌더링 시 자식 페이지의 내용을 담게 된다.
app 폴더 바로 아래 있는 layout.js는 topmost layout 또는 root layout이라 하며,필수적으로 모든 next.js 애플리케이션에 레이아웃된다. 해당 파일은 지우더라도 next.js 애플리케이션을 시작할때 regenerate된다.
// layout.js
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// html의 body 태그 내에 아래와 같이 레이아웃을 만들어 줄 수 있음
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header
style={{
backgroundColor: "lightblue",
padding: "1rem",
}}
>
<p>Header</p>
</header>
{children}
<footer
style ={{
backgroundColor: "ghostwhite",
padding: "1rem"
}}>
<p>Footer</p>
</footer>
</body>
</html>
)
}이렇게 root layout에 header 태그와 footer 태그를 추가해주면
이렇게 모든 next.js의 페이지에 뜨게 된다
특정 페이지에서 다른 컨텐츠의 레이아웃을 추가시키고 싶은 경우
-
예를 들어 product의 detail page에 접근했을 때 product detail에 해당하는 레이아웃 컨텐츠를 추가시키고 싶은 경우
컨텐츠를 추가하고 싶은 페이지의 경로(여기선 [productId] 폴더)에 layout.js를 만들어주면
해당 이미지의 Header,Footer(root layout)안에 Featured product(productDetailLayout)이 중첩되어 레아아웃 된다.
이걸 중첩된 레이아웃(Nested Layout)이라 함
만약 라우트 그룹을 만들고 해당 라우트 그룹에서 추가적인 레이아웃 컨텐츠를 만들고 싶으면
이와 같이 경로를 지정해주면 /login, /register 경로에서만 AuthLayout이 출력되게 된다.
선한 영향력을 펼치는 개발자가 되겠습니다.