Layouts

생성 일시

Nov 18, 2024 02:44 PM

반복되는 컴포넌트를 넣는 곳~


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body> /*같은 폴더내에 있는 Page 컴포넌트들*/
    </html>
  )
}

/* 실제 이 코드를 작성하는 것은 아니고, 이런 느낌으로 작동된다는 의미
<Layout>
	<Page 컴포넌트들>
</Layout>
*/

layout.tsx

NextJS는 page 이전에 이 layout 파일을 먼저 보고 렌더링 한다

예시

이렇게 반복되는 컴포넌트(여기선 Navigation)를 넣으면 된다


import Navigation from "../commponents/navigation";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
	      <Navigation />
	      {children}
      </body> /*같은 폴더내에 있는 Page 컴포넌트들*/
    </html>
  )
}

레이아웃들은 서로 상쇄되지 않고 중첩된다.

⇒ 자식 page에서는 부모 layout과 본인 layout 모두가 나온다.

순서) 루트 layout > 자식 layout > 상위로 올라가 부모 layout이 있으면 하나씩 중첩한다