next js layout

오늘은 next js layout 잡는 방법에 대해 포스팅해보겠다.

방법은 간단하다.

먼저

src > component 폴더를 만들고  header폴더 생성 -header폴더안에 Header.tsx생성
-Header.tsx

import React from "react";

const Header = () => {
  return <div>Header</div>;
};

export default Header;

src > component 폴더를 만들고  footer폴더 생성 -footer폴더안에 Footer.tsx생성


-Footer.tsx

import React from "react";

const Footer = () => {
  return <div>Footer</div>;
};

export default Footer;

위와같이 헤더와 푸터 컴포넌트를 만들었다면

src 폴더 안에 layout 이라는 폴더를 만들고

layout폴더 내부에 Layout.tsx라는 컴포넌트를 만들어준다.

헤더와 푸터는 공통으로 쓰일거기때문에 재사용성을 위해 layout컴포넌트를 만들어준다.

import React, { ReactComponentElement, ReactNode } from "react";
import Footer from "../2.component/footer/Footer";
import Header from "../2.component/header/Header";

const Layout = ({ children }: { children: ReactNode }) => {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
};

export default Layout;

우리의 pages폴더내부에 들어가보면 _app.tsx이라는 파일이 있을것이다.

import { Console } from "console";
import type { AppProps } from "next/app";
import Layout from "../1.layout/Layout";

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

위와같이 레이아웃 컴포넌트내부에 컴포넌트를 넣게되면 react에서는 태그 내부의 내용은 children으로 가져와서 랜더링 시킬 수 있다.

계층구조를 나타내보면 _app.tsx > layout > header=footer 이 되는것이고

app에서 layout을 가져와서 화면을 구성한다.

layout내부에 그 어떤게 들어가도 layout에서는 children으로 화면에 랜더링 시킬 수 있기 때문에

재사용성이 높아지는 것이다 .

또한 pages내부에 about.tsx라는 페이지를 만들어 확인해보면

localhost:3000/about 으로 들어가게되면 레이아웃이 잘 들어가진게 확인된다.

이러한 레이어의 특성을 하나씩 올리면서 layered architecture의 내용을 갖추어 나갈 생각이다 .