Next.Js
[Next.Js] Layouts 사용하기
heew0n
2024. 3. 15. 14:40
app > layout.tsx
import Navigation from "../components/navigation";
export default function RootLayout({children}: {children: React.ReactNode;}) {
return (
<html lang="en">
<body>
<Navigation />
{children}
</body>
</html>
);
}
layout.tsx 파일을 만들어 사용할 layout의 내용을 작성해주면 된다.
layout을 사용하는 원래 페이지에서 보여줄 내용은 children으로 받아서 사용한다.
만약 여기서 about-us의 레이아웃만 다르게 바꾸고 싶다면
about-us 폴더 안에 또 다른 layout.tsx 파일을 만들면 된다.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
{children}
© Next JS is great!
</div>
);
}
중첩된 레이아웃
폴더 내에 정의된 레이아웃(예: app/about-us/layout.tsx)은 특정 경로 세그먼트에 적용되고 해당 세그먼트가 활성화될 때 렌더링된다. 기본적으로 파일 계층 구조의 레이아웃은 중첩된다. 즉, child props 통해 자식 레이아웃을 래핑한다.
우선 폴더 구조는 이렇다
about-us에도 레이아웃 파일이 있고, sales에도 레이아웃 파일이 있는 상태!
그리고 sales의 레이아웃에 $ 를 입력해보고 이 상태에서 sales page를 확인해보자
app > about-us > company > jobs > sales > layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
{children}
$$$$$$$
</div>
);
}
about-us의 layout 내용과 sales의 layout 내용이 같이 나타나는 것을 볼 수 있다.
상위 폴더로 이동하여 레이아웃이 있는지 확인하고 레이아웃이 있는 경우에 이 레이아웃을 사용하여 하위 항목을 렌더링하는 것이다.
<Layout>
<AboutUsLayout>
<Sales />
</AboutUsLayout>
</Layout>
이런 식의 구조를 NextJS가 실제로 해주고 있는 것이다.
