NextJS에 레이아웃 추가 - 3부

이제 basic application set up 이 있으므로 더 자세한 작업에 들어갈 수 있습니다.

part 1에서 보고 있는 전역 구조에 대해 생각해 보라고 요청했고, 제가 선택한 템플릿에 3개의 디자인된 페이지가 있다는 것을 알게 되었습니다.



이 세 페이지의 공통 요소는 머리글과 바닥글 부분입니다. 모든 페이지에서 동일하게 보이므로 하나의 레이아웃 파일에서 만들 수 있으므로 반복할 필요가 없습니다.

이 기사에서는 이를 수행하는 방법을 보여 드리겠습니다.

레이아웃 만들기

레이아웃 파일을 추가하여 시작하겠습니다. 이를 위해 먼저 구성 요소 폴더를 프로젝트에 추가해야 합니다.
그런 다음 내부에 layout.js라는 파일을 만듭니다.

일부 하드 코딩된 레이아웃 요소부터 시작하여 나중에 구성 요소로 이동하겠습니다.

export default function Layout({ children }) {
  return (
    <>
      <header>Header</header>
      <main>{children}</main>
      <footer>&copy; 2022 - Our portfolio</footer>
    </>
  );
}

보시다시피 레이아웃은 기술적으로 다른 요소를 렌더링하는 구성 요소입니다.
내부에는 "children" 를 렌더링하는데, 이는 우리가 내부에 넣는 모든 것입니다.

이 레이아웃을 사용하려면 _app.js 파일에서 로드해야 합니다.
이 파일은 애플리케이션의 진입점입니다.

기본적으로 던지는 것은 무엇이든 반환하지만 이 레이아웃으로 래핑할 수 있습니다.

import '../styles/globals.css';
import Layout from '../components/layout';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

보시다시피 이제 구성요소 요소가 레이아웃에 래핑되어 있으므로 Component는 정의된 대로 children 부품이 됩니다.

이제 프로젝트를 실행하여 실제로 작동하는지 확인할 수 있습니다. 이제 페이지에 머리글과 바닥글이 있어야 합니다.
아직 많이 보이지는 않지만 다음 기사에서 이에 대해 논의할 것입니다.



오늘의 코드를 보고 싶으시면 GitHub 에 올렸습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나