Next.js
페이지와 공통 레이아웃 만들기
page는 주소의 화면을, layout은 여러 페이지를 감싸는 공통 구조를 정의합니다.
이럴 때 필요해요
공연 목록과 상세 화면이 공통 머리글을 사용하도록 구성합니다.
어떻게 동작하나요?
app/concerts/page.tsx는 /concerts 경로의 페이지입니다. 폴더 경로가 URL 경로와 연결됩니다. 아무 파일이나 만든다고 모두 페이지가 되는 것은 아닙니다.
layout은 페이지가 바뀌어도 공유할 구조를 감쌉니다. 루트 app/layout.tsx는 html과 body를 포함하며 children 위치에 하위 화면을 배치합니다.
아래는 두 파일을 설명하는 예제입니다. 루트 레이아웃의 header는 공통으로, concerts 페이지의 h1은 해당 경로에서 표시됩니다. 중첩 레이아웃은 이 구조를 더 작은 경로 단위로 확장한 것입니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
// app/layout.tsx
import type { ReactNode } from "react";
export default function Layout({ children }: { children: ReactNode }) {
return <html lang="ko"><body><header>공연 예매</header>{children}</body></html>;
}
// app/concerts/page.tsx
export default function Concerts() { return <h1>공연 목록</h1>; }서로 다른 두 파일에 놓는 코드이며 /concerts에는 공통 머리글과 목록 제목이 함께 표시됩니다.
자주 헷갈리는 포인트
- 루트 레이아웃에서 children을 빼면 페이지 내용이 표시되지 않습니다.
- 파일 이름 page와 layout의 역할을 구분합니다.
내 말로 설명해 보기
공통 머리글과 공연 목록 제목은 각각 어느 파일에 둘까요?
생각할 단서 여러 페이지에서 공통으로 보여야 하는 부분을 먼저 찾아보세요.
예시 답변 확인
설명에 들어갈 핵심
- page는 주소의 화면을, layout은 여러 페이지를 감싸는 공통 구조를 정의합니다.
- 서로 다른 두 파일에 놓는 코드이며 /concerts에는 공통 머리글과 목록 제목이 함께 표시됩니다.
예시 답변
공통 머리글은 layout에, 해당 주소의 내용인 공연 목록 제목은 page에 둡니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.