App Router (2) - 레이아웃 설정

2026.09.22 · 2분 읽기 · 조회 0

레이아웃 설정

App Router에서는 page.tsx 파일이 페이지 역할을 하는 파일로 자동 설정된다.

이는 레이아웃도 마찬가지이다.
layout.tsx 파일을 만들면 해당 페이지에 레이아웃이 적용된다.

레이아웃은 페이지 컴포넌트의 부모로 작동하며, 하위의 모든 페이지에도 적용된다.

이렇게 설정하면 /search로 시작하는 모든 하위의 페이지에도 적용이된다. 만약 layout.tsx가 여러개이면 중첩이 가능하다.

프로젝트 폴더를 보면 기본 폴더에 이미 app/layout.tsx 파일이 있을 것이다.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

내부에는 다음과 같은 루트레이아웃 코드가 있다. 자식 컴포넌트들을 <body> 태그로 감싸고 있는 것을 볼 수 있다. 때문에 해당 파일은 없애면 안된다.

search/layout.tsx 경로에 파일을 만들어 보자.

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

이렇게 레이아웃을 작성하면 /search 경로로 접속했을 때 해당 레이아웃이 나타난다.
그러나 페이지의 내용은 보이지 않는다. 페이지 컴포넌트를 렌더링해줄 위치를 지정해줘야 한다.

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

프롭스로 {children}을 구조분해할당으로 받는다. 이것은 페이지 컴포넌트이다. 그리고 페이지를 보여주고 싶은 위치에 {children}을 배치해주면 된다. 타입은 reactNode이다.

Route Group

/ 페이지와 /search 에만 검색 레이아웃을 적용하는 방법을 알아보자. Route Group이라는 것을 이용하면 된다.

/app 폴더 내부에 (with-searchbar)라는 이름의 폴더를 만들어준다. 이는 라우트 그룹이다. 폴더명에 괄호가 있으면 브라우저는 이를 경로로 인식하지 않는다.

다음과 같이 / 페이지와 /search 페이지의 파일들을 라우트 그룹 내부에 넣어도 경로는 달라지지 않는다. 라우트 그룹 내부에 layout.tsx 파일을 만들면 이 두 개의 페이지에만 레이아웃을 적용시킬 수 있다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글