React 프로젝트 만들기 (2) - 레이아웃 생성

components 폴더 생성

 

root 디렉토리에 components 폴더를 생성한다

하위에 layout 폴더를 생성하고 그 안쪽에 layout과 관련된 로직을 추가할것이다

 

프로젝트가 실행될 때 가장 먼저 실행되는것이 _app.tsx 이다.
만약 localhost:3000/home 으로 접속 시 _app.tsx 가  실행되면서 Comonent로 "home" Component가 들어오게된다
그렇기에 레이아웃을 씌우는 대상은 _app.tsx가된다

 

Header, Footer 생성

 

기본적인 헤더, 푸터를 생성해보자

 

▼Header.tsx

import React from 'react'

const Header = () => {
    return (
        <>
            <h1>Header</h1>
        </>
    )
}

export default Header

 

▼Footer.tsx

import React from 'react'

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

export default Footer

 

Layout 생성

 

위에서 만들어진 Header, Footer 를 layout화 시켜보자

 

▼ Layout.tsx

import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import {Noto_Sans_KR} from "next/font/google";

type LayoutProps = {
  children: React.ReactNode
  className?: string
}

const notoSansKr = Noto_Sans_KR({
    subsets: ['latin'],
    weight: ['100', '400', '700', '900'],
    variable: '--font-notoSansKr',
})

export default function Layout({ children, className }: LayoutProps) {
  return (
    <div className={`${notoSansKr.className}`}>
      <Header />
      <div>
          {children}
      </div>
      <Footer />
    </div>
  )
}

 

layout function 에는 인자값으로 children, className 이 들어올건데, 이것의 타입은 위에 선언된 LayoutProps 이다.

그리고 Header, body, Footer 모두 폰트를 적용시키기 위하여 상위에 Classname을 설정해줬다

 

참고로 return 시 상위 태그를 선언하지않으면 오류가 난다

아래와 같이 빈 태그라도 넣어줘야한다

 

만든 Layout을 _app에 씌운다

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import {NextPage} from "next";
import {ReactElement, ReactNode} from "react";
import Head from "next/head";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (_page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}
export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)

  return(
      <>
        {getLayout(<Component {...pageProps} />)}
      </>
  )
}

 

index 정리

 

필요없는 코드를 정리해준다

import { Inter } from 'next/font/google'
import {NextPageWithLayout} from "@/pages/_app";
import Layout from "@/components/layout/Layout";

const inter = Inter({ subsets: ['latin'] })

const Home : NextPageWithLayout = () => {
  return (
    <>
      <h1>본문 영역입니다</h1>
    </>
  )
}

Home.getLayout = function getLayout(page) {
  return<Layout>{page}</Layout>
}

export default Home

 

 

이렇게 레이아웃이 나뉘어졌다!