중첩 레이아웃

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 13번째.

루트 레이아웃(root layout)만 레이아웃이 될 수 있는 것은 아닙니다. layout.jsx를 어떤 폴더에든 넣으면 해당 폴더의 라우트 및 그 하위 라우트만 감싸게 됩니다(wraps).

app/
    layout.jsx          wraps EVERYTHING
    page.jsx            /
    menu/
        layout.jsx      wraps /menu and everything under it
        page.jsx        /menu
        pizza/
            page.jsx    /menu/pizza

/menu/pizza에 방문하면 Next.js는 바깥쪽에서 안쪽으로 이들을 중첩합니다:

RootLayout
    MenuLayout
        PizzaPage

/에 방문하면 루트 layout만 실행됩니다. menu layout은 해당 URL의 경로에 없으므로 절대로 나타나지 않습니다.

중첩 layout은 루트 layout과 거의 동일하게 작성되지만, 쉘 구조가 제외됩니다. 즉, <html>과 <body>가 없습니다. 그저 children을 전달받는 컴포넌트일 뿐입니다.

이것이 바로 사이트의 한 섹션이 현재 URL에 대한 단 하나의 if 문 없이도 고유한 사이드바, 고유한 탭, 고유한 제목을 갖는 방식입니다.

챌린지

쉬움

메뉴 섹션에는 고유한 헤딩이 필요합니다: /menu 및 해당 dish 페이지에만 적용되고, 다른 곳에는 적용되지 않아야 합니다.

app/menu/layout.jsx가 이미 존재하며 children을 그대로 전달합니다. 해당 <section> 내부의 {children} 위에 다음을 추가하세요:

id="menu-header" 속성과 Menu 텍스트를 가진 <h2>

테스트는 헤더가 /menu 및 /menu/pizza에 표시되고, /로 돌아갔을 때는 사라지는지 확인합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}