루트 레이아웃

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

모든 애플리케이션에는 페이지 쉘, 헤더, 푸터와 같이 절대 변하지 않는 부분이 있습니다. Next.js에서는 이러한 요소들이 layout에 위치하며, 가장 바깥쪽에 있는 레이아웃을 root layout이라고 부릅니다.

지금까지 계속 열어두었던 바로 그 파일입니다:

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

페이지와 다른 세 가지 특징이 있습니다:

이 파일은 필수이며, <html> 및 <body>를 렌더링하는 유일한 파일입니다.
URL과 일치하는 페이지가 무엇이든 children을 전달받습니다. {children}을 렌더링하는 것을 잊으면 app에 셸 이외에는 아무것도 표시되지 않습니다.
페이지에서 이 파일을 가져오지 않아도 app의 모든 라우트를 감쌉니다.

지속됩니다

이 부분이 사람들을 놀라게 하는 부분입니다. 사용자가 /에서 /menu로 이동할 때, 레이아웃은 다시 생성되지 않습니다. Next.js는 내부의 페이지를 교체하고 레이아웃은 그대로 둡니다.

따라서 공유 헤더가 깜빡이지 않고, 사이드바의 비디오가 계속 재생되며, 레이아웃에 상주하는 모든 상태가 내비게이션 후에도 유지됩니다. 열린 메뉴는 열린 상태로 유지되고, 스크롤 위치도 그대로 유지됩니다. 레이아웃은 오래 유지되는 프레임이며, 페이지는 그 안에서 들어오고 나갑니다.

기억해야 할 한 가지 결과는, layout은 탐색 시 다시 실행되지 않으므로 현재 페이지의 searchParams를 읽을 수 없다는 점입니다. 변경 사항을 감지하지 않습니다.

직접 해보기

이 레슨에는 코드 챌린지가 없습니다.