[Next.js] App Router - 레이아웃

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
3.3) 레이아웃 설정하기

3.3 레이아웃 설정하기

Root Layout

src/app/layout.tsx 에서 설정할 수 있으며, 이 루트 레이아웃은 하위 모든 페이지 컴포넌트의 레이아웃으로 적용된다.

 

페이지별 Layout

app
├── layout.tsx
├── page.tsx
└── search
    ├── layout.tsx
    └── page.tsx

이런식으로 search 경로에도 layout.tsx가 존재한다면, root layout을 덮는 것이 아닌 중첩으로 Layout이 적용된다.

따라서 Root Layout > search/layout.tsx > search/page.tsx 순으로 렌더링이 된다.

 

Layout 설정 주의사항

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

반드시 children을 props로 받아와 표시하고 싶은 부분에 children을 작성해주어야 화면에 page 컴포넌트가 표시된다.

 

Route Group : 특정 페이지들만 동일한 Layout을 적용시키고 싶을 때

특정 페이지들만 혹은 특정 페이지를 제외한 모든 페이지들에 동일한 Layout을 적용시키고 싶을 때가 있다.

이때 Route Group을 사용해서 페이지들을 묶을 수 있다.

(with-searchbar)
├── layout.tsx
├── page.module.css
├── page.tsx
└── search
    └── page.tsx

RouteGroup : (with-searchbar)와 같이 소괄호로 묶어준 폴더

 

RouteGroup은 경로상 아무런 영향을 미치지 않고, RouteGroup에 묶여있는 페이지들에만 동일한 layout을 적용시킬 수 있다.