[Gatsby] 새 페이지 만들고 Link component 사용하기 - #03

 

 

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

 

이번 시간에는 Gatsby로 새로운 페이지를 만들고 Gatsby의 Link component를 사용해 보겠습니다.

 

/src/pages/Index.js 파일을 다음과 같이 수정합니다.

import * as React from "react"

const IndexPage = () => {
  return (
    <main>
      <title>Home Page</title>
      <h1>Welcome to my Gatsby site!</h1>
      <p>I'm making this by following the Gatsby Tutorial.</p>
    </main>
  )
}

export default IndexPage

 

Index 페이지가 다음과 같이 수정되었습니다.

 

 

/src/pages 에 about.js 파일을 만들고 다음과 같이 작성합니다.

 

import * as React from 'react'

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

export default AboutPage

 

About 페이지가 다음과 같이 생성되었습니다.

 

 

이제 Home 페이지와 About 페이지에 페이지 이동을 할 수 있도록 Link Component를 사용해 보겠습니다.

 

index.js 파일을 다음과 같이 수정합니다.

 

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

const IndexPage = () => {
  return (
    <main>
      <title>Home Page</title>
      <h1>Welcome to my Gatsby site!</h1>
      <Link to="/about">About</Link>
      <p>I'm making this by following the Gatsby Tutorial.</p>
    </main>
  )
}

export default IndexPage

 

about.js 파일을 다음과 같이 수정합니다.

 

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

const AboutPage = () => {
  return (
    <main>
      <title>About Me</title>
      <h1>About Me</h1>
      <Link to="/">Back to Home</Link>
      <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
    </main>
  )
}

export default AboutPage

 

이렇게 하면, Home 에서는 About 페이지로, About 페이지에서는 Home 페이지로 이동할 수 있습니다.

 

 

 

이렇게 Gatsby로 새로운 페이지를 만들고 Gatsby의 Link component를 사용해 봤습니다.

 

해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)