Web app을 개발하다보면 네비게이션바나 footer와 같이 공통적으로 사용할 컴포넌트가 필요한 경우가 자주 발생합니다.
이것을 매번 일일이 해주려면 여간 귀찮은 일이 아니죠.
Next.js에서는 layout이라는 기능으로 이것을 지원하고 있습니다.
Create Project
create-next-app을 사용해서 프로젝트를 생성합니다.
그리고 기본 페이지 구성을 위해 다음과 같이 넣어줍니다.
// app/page.tsx
export default function Home() {
return (
<div className="h-screen w-screen flex flex-col justify-center items-center">
<div>Home</div>
</div>
);
}
// app/menu/[id]/page.tsx
export default function Menu({ params }: { params: { id: string } }) {
return (
<div className="h-screen w-screen flex flex-col justify-center items-center">
<h1>Menu: {params.id}</h1>
</div>
);
}이제 재료가 준비되었으니 layout에 대해 살펴보겠습니다.
Layout
간단하게 layout의 동작에 대해 살펴보겠습니다.
프로젝트를 생성하면 기본적으로 layout.tsx 파일이 생성됩니다. 이 파일은 삭제를 해도 다시 생성이 되요.
프레임워크에서 관리를 하고 있는 파일이라는 뜻이죠.
// app/components/navigation.tsx
export default function Navigation() {
return (
<div className="w-screen h-12 fixed bg-gray-900 flex justify-center items-center text-white">
<div>Navigation Bar</div>
</div>
);
}
// app/layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Navigation />
{children}
</body>
</html>
);
}앱을 실행시켜서 브라우저로 확인해 보세요.
다른 페이지로 이동을 해도 Navigation은 항상 보이는 것을 알 수 있어요.
하위 경로의 모든 페이지에 적용이 되기 때문입니다.
Navigation Bar
이제 위에서 알아본 layout을 이용하여 navigation bar를 만들어 보겠습니다.
Next.js는 Link도 제공을 해줘서 쉽게 navigation을 만들 수 있어요.
import Link from "next/link";
export default function Navigation() {
return (
<div className="w-screen h-12 fixed bg-gray-900 flex justify-center items-center text-white gap-4">
<Link href={"/"}>Home</Link>
<Link href={"/menu/1"}>Menu 1</Link>
<Link href={"/menu/2"}>Menu 2</Link>
<Link href={"/menu/3"}>Menu 3</Link>
</div>
);
}브라우저를 통해 확인해 보세요.
너무 쉽게 navigation bar가 만들어졌죠? 이래서 next.js를 좋아합니다. 😄
Sub Layout
layout은 하위 경로의 모든 페이지에 적용된다고 설명드렸었죠?
이를 이용하여 특정 페이지 그룹에만 공통적으로 적용되는 컴포넌트도 만들 수 있어요.
// app/components/footer.tsx
export default function Footer() {
return (
<div className="w-screen h-8 bg-gray-800 fixed bottom-0 flex justify-center items-center text-white gap-4">
Copyright © 2024 llHoYall
</div>
);
}
// app/manu/layout.tsx
import Footer from "../components/footer";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div>
{children}
<Footer/>
</div>
);
}이제 menu의 하위에만 Footer가 적용되는 것을 확인하실 수 있습니다.
Wrap Up
이번 포스팅에서는 next.js의 layout 기능에 대하여 알아보았습니다.
확실히 최신 framework 답게 UI 구성을 위한 편의 기능들이 많아서 작업이 수월합니다.
잘 활용해서 편하게 개발해 보세요.
'Web > JavaScript' 카테고리의 다른 글
| [Next.js] Routing using App Router (0) | 2024.02.04 |
|---|---|
| [Typescript] Module System (0) | 2023.08.09 |
| [Svelte] Template Syntax (0) | 2022.12.10 |
| [Svelte] Getting Started with SvelteKit (0) | 2022.12.01 |
| [JavaScript] Map Object (0) | 2022.07.14 |
댓글