[Gatsby] 개츠비 페이지 레이아웃 만들기

개츠비 설치와 기본 프로젝트 생성해야 밑의 내용을 따라할 수 있습니다.

개츠비 설치 & 프로젝트 생성 포스트 바로가기 ->

 

 

이번 포스트는 가정이 필요하다.

header.js 그리고 footer.js가 src -> components(생성)에 저장되어있다.

 

시작!

헤더(header), 푸터(footer)를 리액트에서 사용할 때 이렇게 사용하기도 한다.

헤더와 푸터 가져와서 위와 아래에 적용시킨다.

 

인덱스 페이지 - 레이아웃 적용 전

import React from 'react'

import Header from '../components/header'
import Footer from '../components/footer'

const IndexPage = () => {
  return(
    <div>
      <Header />
      내용
      <Footer />
    </div>
  )
}

export default IndexPage

 

인덱스 페이지 - 레이아웃 적용 후

import React from 'react'

import Layout from '../components/layout'

const IndexPage = () => {
  return (
    <Layout>
      내용
    </Layout>
  )
}

export default IndexPage

※ 모든 내용을 Layout에 넣어 주는게 포인트

 

레이아웃 만들기

방법은 헤더나 푸터 만드는것과 비슷하다.

1. 우선은 앞서 만들어 놓은 components 폴더에 layout.js 만들기

 

2. 레이아웃 컴포넌트 구성

import React from 'react'

import Header from './header'
import Footer from './footer'

const Layout = (props) => {
  return (
    <div>
      <Header />
      {props.children}
      <Footer />
    </div>
  )
}

export default Layout

 

저 props.children 이라는 녀석이 앞서 넣은 <Layout></Layout> 속의 내용을 가져온다.

헤더와 푸터도 이 페이지에만 넣어주고, 다른 컴포넌트도 마찬가지.

이 레이아웃 페이지에서 전체적인 페이지의 레이아웃을 관리할 수 있는 신세계가 열린다.

 

끝!