List

Data in Gatsby

Part 3

들어가면서

순서가 뒤죽박죽 내가 보고싶은 대로 작성되는거라 나중에 정리를 한번은 해야될 것 같은데 일단은 post한다. 한참동안 개인 블로그에 글을 쓰지 못했는데, 개인 학습하는 곳에 몰두하다보니 velog에만 post를 하고 여기에는 좀 덜 신경을 쓴것 같다. 오늘 시간이 좀 남아서 남는 시간에 저번에 이어서 진행해보려 한다.

Have to know

  • Layout.js

Layout(Nested)

Gatsby는 확장에 용이하다. 그 뜻은 Gatsby의 모든 기능에 대해서 확장 가능하고 수정 할 수 있는 plugin이 있다는 것을 의미한다.

Layout component는 page에서 공통적으로 사용될 section을 의미한다.

// src/pages/index.js
import React from "react";
export default function Home() {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 600 }}>
      <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
      <p>
        What do I like to do? Lots of course but definitely enjoy building
        websites.
      </p>
    </div>
  );
}
// src/pages/about.js
import React from "react";
export default function About() {
  return (
    <div>
      <h1>About me</h1>
      <p>
        I’m good enough, I’m smart enough, and gosh darn it, people like me!
      </p>
    </div>
  );
}
// src/pages/contact.js
import React from "react";
export default function Contact() {
  return (
    <div>
      <h1>I'd love to talk! Email me at the address below</h1>
      <p>
        <a href="mailto:me@example.com">me@example.com</a>
      </p>
    </div>
  );
}

위 1개 home index페이지와 2개 sub페이지가 있다고 예를 들어보자.

sub page들이 home index page와 같이 센터에 위치해 있으면 더 좋게 보일 것이다. 그리고 해당 페이지가 global navigation에 의해 보여진다면 더 나이스해져 보일 것이다. 그러면 사용자가 sub-pages를 방문할 때 더 쉽게 접근 가능 할 것이다.

layout component를 이용하여 공통된 style과 sort로 화면에 보여지도록 하자.

// src/components/layout.js
import React from "react";
export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      {children}
    </div>
  );
}

index.js 페이지를 refactoring 한다.

// src/pages/index.js
import React from "react";
import Layout from "../components/layout";
export default function Home() {
  return (
    <Layout>
      <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
      <p>
        What do I like to do? Lots of course but definitely enjoy building
        websites.
      </p>
    </Layout>
  );
}

그리고 sub page들을 global navigation하여 화면에 만들어 해당 영역에 같이 표시되도록 layout을 변경한다.

import React from "react";
import { Link } from "gatsby";
const ListLink = (props) => (
  <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to}>{props.children}</Link>
  </li>
);
export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      <header style={{ marginBottom: `1.5rem` }}>
        <Link to="/" style={{ textShadow: `none`, backgroundImage: `none` }}>
          <h3 style={{ display: `inline` }}>MySweetSite</h3>
        </Link>
        <ul style={{ listStyle: `none`, float: `right` }}>
          <ListLink to="/">Home</ListLink>
          <ListLink to="/about/">About</ListLink>
          <ListLink to="/contact/">Contact</ListLink>
        </ul>
      </header>
      {children}
    </div>
  );
}

다음에는

data layer in gatsby : gatsby data layer에서 알아보고자 한다.