NextJS에서 사이트 레이아웃의 콘텐츠

이전 수업에서 살펴보기 시작한 사이트의 기본 레이아웃을 다시 한번 살펴보겠습니다:

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

보시다시피, 사이트 레이아웃은 함수를 가진 컴포넌트입니다. 이때 함수 매개변수로 객체가 전달되며, 이 객체에서 키 children을(를) 해당 변수로 추출합니다. 이 변수에는 요청된 URL에 해당하는 파일 page.jsx의 내용이 저장되어 있습니다.

즉, 파일 layout.jsx에 사이트 레이아웃이 저장되어 있고, 변수 children를 사용하여 페이지 콘텐츠가 삽입되어야 할 사이트 레이아웃의 위치를 지정합니다.

예를 들어 페이지 콘텐츠를 어떤 태그로 감싸 보겠습니다:

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

사이트의 콘텐츠를 main 태그로 감싸세요.