NextJs (3) layout.tsx

채영민·2024년 2월 14일

📚 Layouts

💡 모든 페이지에 적용되는 컴포넌트를 사용하고 싶을 때 사용하는 Layout

ex : 만약 nextjs에서 About-us 페이지를 라우팅 하고 싶을 때?

nextjs는 우선적으로 Layout 컴포넌트로 감.

그 후 export default 컴포넌트를 우선적으로 렌더링 함.

마지막으로 About-us URL을 확인하고 해당 페이지를 렌더링 함.
// layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// about-us 페이지 라우팅 방식
<Layout>
  <About-us> // 위 layout 함수에 children에 해당하는 부분 (내부에 있는 컴포넌트들은 리액트에 의해 자동으로 children이라는 props로 바뀌게 됨.)
<Layout>  

layout.tsx는 /app 경로에 루트 세그먼트 뿐만 아니라 /app 경로 내에 다른 폴더들에서도 사용 가능하다.
- ex) app/about-us 만에 적용하고 싶은 레이아웃을 작성하고 싶을 때

// app/about-us/layout.tsx 

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

자식 폴더들은 부모 폴더에 레이아웃을 상속받는다.
- ex : app/about-us/company/sales/pages.tsx

위에서 root.layout의 네비게이션과, about-us.layout의 요소들과 같이 중복되는 레이아웃들은 서로 중첩해서 사용함.

채영민

항상 재밌는것을 찾아 헤매는 호랑이띠 떠돌이;

이전 포스트

NextJs (2) CSR vs SSR(+hydrate, use client)

다음 포스트

NextJs (3) layout.tsx

📚 Layouts

NextJs (2) CSR vs SSR(+hydrate, use client)

NextJs (4) Metadata, Routes Groups, Dynamic Routes

0개의 댓글