[Gatsby] Layout 컴포넌트 만들어 UI 재사용 하기 - #04

 

안녕하세요. 혀코입니다.

이번 시간에는 Gatsby로 각 페이지 마다 반복되는 UI를 layout 컴포넌트로 만들고 재사용 하는 방법에 대해서 알아보겠습니다.

 

src 폴더 아래에 components 폴더를 만들고 layout.js 파일을 만들어 코드를 다음과 같이 작성합니다. 

import * as React from 'react'
import { Link } from 'gatsby'

/*
const Layout = (props) => {
  const pageTitle = props.pageTitle
  const children = props.children
  return (
    ...
  )
}
*/

/* JavaScript Destructuring Applied */
const Layout = ({ pageTitle, children }) => {
  return (
    <div>
      <title>{pageTitle}</title>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <main>
        <h1>{pageTitle}</h1>
        {children}
      </main>
    </div>
  )
}

 

Layout 컴포넌트를 만들었으니 이것을 index와 about 페이지에 적용해 줍니다.

src/pages/index.js

 

import * as React from 'react'
import Layout from '../components/layout'

const IndexPage = () => {
  return (
    <Layout pageTitle="Home Page">
      <p>I'm making this by following the Gatsby Tutorial.</p>
    </Layout>
  )
}

export default IndexPage

 

 

src/pages/about.js

 

import * as React from 'react'
import Layout from '../components/layout'

const AboutPage = () => {
  return (
    <Layout pageTitle="About Me">
      <p>
        Hi there! I'm the proud creator of this site, which I built with Gatsby.
      </p>
    </Layout>
  )
}

export default AboutPage

 

 

 

이렇게 반복되는 UI를 layout 컴포넌트로 만들고 재사용 하는 방법에 대해서 알아봤습니다.

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)