[NEXT.JS] header와 footer같은 공통된 layout을 next.js에서 적용시키려면?

react에서 header와 footer같은 공통 layout을 적용하려면 Router.js파일에서 <BrowserRoute> </BrowserRoute>바깥에 <Header />와 <Footer />컴포넌트를 작성하면 되는데 next.js는 파일기반 페이지라우팅이기 때문에 Route를 따로 작성하지 않는다.

next.js에서 공통되는 layout을 작성하는 방법을 알아보겠다. 

 

Layout.jsx

Layout.jsx파일을 생성하여 header와 footer컴포넌트를 포함하는 컴포넌트를 생성한다. 

import React, { Fragment } from "react";
import MainHeader from "./MainHeader";
import MainFooter from "./MainFooter";

function Layout({ children }) {
  return (
    <Fragment>
      <MainHeader />
      <main>{children}</main>
      <MainFooter />
    </Fragment>
  );
}

export default Layout;

여기서 <Fragment></Fragment>는 <></>와 같은 기능을 한다. 

 

Layout.jsx를 보면 MainHeader와 MainFooter컴포넌트가 맨위와 맨아래에 위치해 있고 가운데 Main테그 안에 chilren이 있다 

 

children이란?

children은 컴포넌트를 호출할시 <컴포넌트>와 </컴포넌트 사이에 작성한 코드들을 porps로 받는다. 

ex) <Layout>Hello World</Layout> 이라면 children은 Hello World이다.

 

_app.js

_app.js란 react에서 index.js와 같은 역할을 하는 js파일이다. 

_app.js안에 <Component {...pageProps} />이라는 컴포넌트가 하나 있는데 이 컴포넌트가 react에서 index.js파일안에 <App /> 컴포넌트와 같은 역할을 한다. 즉 파일기반 페이지라우팅으로 한 모든 컴포넌트들이 <Component {...pageProps} />안에 담겨있다고 보면 된다.

그럼 <Component {...pageProps} />을 <Layout></Layout>으로 감싸주면 모든 페이지에서 header와 footer컴포넌트들이 보일것이다.

 

import Layout from "@/components/layout/Layout";
import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Layout컴포넌트 안에 Main테그안 children부분이 <Component {...pageProps} />가 되기때문에 모든 페이지에서 Layout컴포넌트가 보일것이다.