지금금까진 Navigation 컴포넌트를 사용하기 위해 이 컴포를 필요로 하는 페이지에 <Navigation />을 일일이 붙여줬다.
하지만 Footer나 Side Bar와 같은 더 많은 공통 컴포가 생겼을 때 다시 또 일일이 갖다 붙이는 건 비효율적이다.
이럴 때 사용되는 것이 layout 파일이다.
layout
next가 about-us 페이지를 렌더링하는 과정은 아래와 같다.
- layout 컴포넌트 렌더링
- URL(
http://localhost:3000/about-us) 확인 - about-us 컴포넌트를 렌더링해야 함을 인식
- 렌더링 된 layout 안에 about-us 컴포넌트 렌더링
코드로 보면 아래와 같은 구조를 갖는다.
<Layout>
<AboutUs />
</Layout>즉, 어떤 페이지로 이동할 때마다 layout 컴포넌트가 렌더링 되고
내가 가려는 페이지가 children prop이 되어 그 안에 렌더링 되는 과정을 거친다.
그렇기에 앞서 복붙한 모든 Navigation을 Layout 안으로 옮겨주면,
단번에 모든 페이지에 적용할 수 있게 되는 거다.
적용
// layout.tsx
import Navigation from "../components/navigations";
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Navigation />
{children}
</body>
</html>
);
}커스텀
일반적으로 생각했을 때 레이아웃이 한 개인 경우는 많지 않다.
홈페이지, 대시보드, 로그인 등 다양한 레이아웃이 필요할텐데
이 때 layout을 각 페이지별로 따로 만들어줄 수 있다.
폴더 하위에 page.tsx를 만들듯
원하는 폴더에 layout.tsx를 생성하면 된다.
// layout.tsx
export default function AboutUsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
{children}
© Next JS is great!
</div>
);
}요렇게 한 번 만들어보자.
Home에는 없는 레이아웃이 About Us에만 적용된 것을 볼 수 있다.
 |  |
|---|
이번에는 아래와 같은 파일을 하나 더 만들고, 해당하는 경로 localhost:3000/about-us/company/jobs/sales 로 이동해보자.
about-us에 있는 layout이 해당 페이지에도 적용된 걸 볼 수 있다.
next는 상위 폴더로 이동해서 레이아웃이 있는지 확인하고, 레이아웃이 있으면 그걸 사용해서 하위 항목을 렌더링한다.
중첩
layout은 상쇄되지 않고, 중첩된다.
sales 폴더에 layout을 하나 만들고,
export default function SalesLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
{children}
👽👽👽
</div>
);
}next의 layout 렌더링 과정을 다시 한 번 정리해보자.
- root layout을 가져와서 렌더링
- URL 확인
- about-us 폴더로 가서 layout 파일이 있는지 확인
- 있으니 렌더링
- 하위 폴더로 타고 가며 layout 파일이 있는지 확인
- sales 밑에 layout 렌더링
- 마지막으로 page.tsx 렌더링
구조는 아래와 같다.
<Layout>
<AboutUsLayout>
<SalesLayout>
<Sales />
</SalesLayout>
</AboutUsLayout>
</Layout>화면으로 보면 위에서부터
- root layout
- children
- Sales layout
- AboutUs layout
요렇게.
즉, 레이아웃은 중첩된다.
Reference
니꼬쌤
