나의 개발일지

[Next.Js] Layouts 사용하기 본문

Next.Js

[Next.Js] Layouts 사용하기

heew0n 2024. 3. 15. 14:40

 

app > layout.tsx

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

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

 

layout.tsx 파일을 만들어 사용할 layout의 내용을 작성해주면 된다.

layout을 사용하는 원래 페이지에서 보여줄 내용은 children으로 받아서 사용한다.

 

 

만약 여기서 about-us의 레이아웃만 다르게 바꾸고 싶다면

about-us 폴더 안에 또 다른 layout.tsx 파일을 만들면 된다.

 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      {children}
      &copy; Next JS is great!
    </div>
  );
}

 

 

중첩된 레이아웃

폴더 내에 정의된 레이아웃(예: app/about-us/layout.tsx)은 특정 경로 세그먼트에 적용되고 해당 세그먼트가 활성화될 때 렌더링된다. 기본적으로 파일 계층 구조의 레이아웃은 중첩된다. 즉, child props 통해 자식 레이아웃을 래핑한다.

 

 

우선 폴더 구조는 이렇다

about-us에도 레이아웃 파일이 있고, sales에도 레이아웃 파일이 있는 상태!

 

그리고 sales의 레이아웃에 $ 를 입력해보고 이 상태에서 sales page를 확인해보자

 

app > about-us > company > jobs > sales > layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      {children}
      $$$$$$$
    </div>
  );
}

 

about-us의 layout 내용과 sales의 layout 내용이 같이 나타나는 것을 볼 수 있다.

 

상위 폴더로 이동하여 레이아웃이 있는지 확인하고 레이아웃이 있는 경우에 이 레이아웃을 사용하여 하위 항목을 렌더링하는 것이다.

<Layout>
	<AboutUsLayout>
		<Sales />
	</AboutUsLayout>
</Layout>

 

이런 식의 구조를 NextJS가 실제로 해주고 있는 것이다.

 

 

 

 

저작자표시

'Next.Js' 카테고리의 다른 글

[Next.JS] Data Fetching  (0) 2024.03.23
[Next.JS] Route groups | Metadata | Params  (0) 2024.03.20
[Next.Js] Navigation / usePathname  (0) 2024.03.05
[Next.Js] 404 페이지 / Not-Found Errors 처리  (0) 2024.03.04
[Next.Js] Page router와 다른 점 / App Router를 사용하는 이유 / 설치 및 Routing  (0) 2024.02.28
'Next.Js' Related Articles more