티스토리 뷰
✅ RootLayout
app폴더 바로 밑에 있는 layout.tsx 파일의 경우 next 앱의 모든 페이지에 공통적으로 적용되는 글로벌 레이아웃이다.
RootLayout은 페이지 컴포넌트를 children으로 받아서 html, body 태그 안에 넣어주는 역할을 한다.
즉, html 기초 틀 역할을 하는 파일이므로 필수로 있어야하는 파일이다.
// ..
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
</body>
</html>
);
}
그래서 next 앱을 처음 생성할 때 자동으로 app/layout.tsx 파일이 생성되고, 만약 app/layout.tsx를 지우거나 파일명을 바꾸면
next가 자동으로 새로운 app/layout.tsx 파일을 생성한다.
✅ 페이지에 레이아웃 설정하기
page라는 이름을 가진 파일이 자동으로 페이지 역할을 하는 파일로 설정되듯이
layout이라는 파일을 생성하면 해당 경로의 layout 역할을 하는 파일로 자동 설정된다.
예를 들어, search라는 경로(폴더)를 만들고 해당 경로에 적용할 layout.tsx파일을 만들면 이 레이아웃은 search 페이지에 적용된다.
이 때, search폴더에 생성한 layout.tsx는 "/search" 경로로 시작하는 모든 페이지에 레이아웃으로 적용된다.
만약, setting 폴더 내에도 layout.tsx 파일을 만들어주면 setting 페이지는 search의 layout과 setting의 layout이 중첩으로 적용된다. (덮어씌워지는 개념 X)
레이아웃을 적용하려면 Layout에 전달되는 페이지 컴포넌트를 children으로 받아서 페이지를 레이아웃 내 어디에 위치시킬 것인지 작성해줘야 한다.
// search/page.tsx
export default function Page() {
return <div>검색 페이지</div>;
}// search/layout.tsx
import { ReactNode } from "react";
export default function Layout({ children }: { children: ReactNode }) {
return (
<div>
<div>임시 서치바</div>
{children}
</div>
);
}
✅ 공통된 경로로 시작하지 않지만 동일한 레이아웃을 적용하기
app router 버전의 새로운 기능인 라우트 그룹(Route Group)을 사용하면 된다.
"(폴더명)"처럼 소괄호로 묶인 폴더명을 가진 폴더를 만들어주면 라우트 그룹이 만들어지는데 라우트 그룹은 경로에 아무런 영향을 미치지 않는다.
예를 들어, 현재 index페이지, search페이지, book페이지가 있는데 index페이지와 search페이지에만 동일한 레이아웃을 적용하고 싶다면
(with-searchbar)라는 라우트 그룹을 하나 만들어 주고 라우트 그룹 아래로 /search폴더와 /page.tsx파일을 옮겨준 뒤
라우트 그룹 바로 밑에 layout.tsx 파일을 만들어 준다.
그러면 경로 상에는 영향을 미치지 않으면서 레이아웃만 동일하게 적용해줄 수 있다.
참고자료
'개발공부 > ⬛ Next.js' 카테고리의 다른 글
| [Next.js] App Router 방식으로 라우팅 설정하기 (0) | 2024.09.19 |
|---|---|
| [Next.js] Pages Router의 장단점 (3) | 2024.09.17 |
| [Next.js] SEO 적용하기[Next.js] SEO 적용하기 (Using Pages Router) (4) | 2024.09.16 |
| [Next.js] data fetching 및 사전 렌더링 방식 3가지 (Using Pages Router) (1) | 2024.09.11 |
| [Next.js] Global Layout과 페이지별 레이아웃 적용하기 (Using Pages Router) (0) | 2024.09.10 |
프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그