[App Router] 레이아웃 설정

woodstockwoodstock
1 min read

앱 라우터의 레이아웃 설정

App Router에서는 layout.tsx파일을 사용하여 특정 경로와 그 하위 경로에 공통적으로 적용될 레이아웃을 정의할 수 있다.

.
├── src
│   └── app
│       ├── search
│       │   ├── layout.tsx // search 하위 경로 레이아웃
│       │   └── page.tsx
│       ├── book
│       │   └── [id]
│       │       └── page.tsx
│       ├── page.tsx
│       └── layout.tsx // 글로벌 레이아웃
└── tsconfig.json

1. 글로벌 레이아웃

// app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body>
        {children}
      </body>
    </html>
  );
}


2. 하위 경로에 적용되는 레이아웃 예시

// search/layout.ysx

import { ReactNode } from "react";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <div>
      <div>임시 서치바</div>
      {children}
    </div>
  );
}


3. Route Groups

"Route Groups"는 특정 페이지들에만 공통 레이아웃을 적용하거나, 라우트 구조를 논리적으로 구성할 때 사용된다.

.
├── src
│   └── app
│       ├── (with-searchbar)
│       │   ├── layout.tsx // 경로에 상관없이 (with-searchbar)안에 있는 페이지에 일괄 적용
│       │   ├── page.tsx // '/'
│       │   └── search
│       │       └── page.tsx // '/search'
│       ├── book
│       │   └── [id]
│       │       └── page.tsx
│       └── layout.tsx



연관 게시글

https://woodstock.hashnode.dev/pages-router-1
0
Subscribe to my newsletter

Read articles from woodstock directly inside your inbox. Subscribe to the newsletter, and don't miss out.

app routerNext.jslayout

Written by

woodstock
woodstock

안녕하세요! 프론트엔드 개발자 woodstock입니다. 저는 매일 조금씩 발전하고자 하는 마음으로 개발공부를 시작했고, 이 블로그는 그 과정에서 배우고 성장하는 이야기를 담고 있습니다. 여러분의 피드백과 조언은 언제나 환영합니다! 함께 배우고 성장하는 과정을 즐길 수 있기를 기대합니다.