개츠비 튜토리얼 2

개츠비 튜토리얼에선 emotion 을 사용하지만,
저는 Styled-Components를 사용 하였습니다.
개인적으로 이게 더 깔끔하다고 생각합니다.

기본적으로 Gatsby JS 는 react 환경에서 이루어지기 때문에 기본적인 Components들은 신경 쓰지 않고 Gatsby에서만 쓰이는 것들을 작성하겠습니다.

GraphQL 을 사용하는데, Gatsby에서 사용하기 위해서는 gatsby.config.js 에서 하면 됩니다.

module.exports = {
 //grapql
 siteMetadata : {
   // site : {
     title : `Pandas Eating Lots`,
   // },
 },
  
  //생략--

이런식으로 data를 작성해주면, src/pages 폴더에서 접근이 가능합니다.

// src/pages/about.js
import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default function About({ data }) {
return (
  <Layout>
    <h1>About {data.site.siteMetadata.title}</h1>
    <p>
      We're the only site running on your computer dedicated to showing the
      best photos and videos of pandas eating lots of food.
    </p>
  </Layout>
)
}

export const query = graphql`
  query {
      site {
          siteMetadata {
              title
          }
      }
  }
`

export const query = graphql`
    query {
        site {
            siteMetadata {
                title
            }
        }
    }
`

쿼리를 날릴 때는, 아래와 같이

query {
    site {
        siteMetadata {
            title 
        }
    }
}

이런식으로 우리가 gatsby.config.js에 작성 해놨던 title에 접근이 가능합니다.

그 후, 컴포넌트 에서는 { data } 로 props를 받아와서 data.site.siteMetadata.title 식으로 접근 해주면 됩니다.