[React기반 Gatsby로 블로그 개발하기] Gatsby Link API

Gatsby 페이지 이동

Link API를 통한 페이지 이동

• <a>를 통해서도 링크이동이 가능하지만, 새로고침이 일어남
• Gatsby에서는 기본적으로 페이지 이동을 위한 APi 제공하고 있음 => Link API

import React, { FunctionComponent } from 'react'
import Text from 'components/Text'
import { Link } from 'gatsby'

const IndexPage: FunctionComponent = function () {
    return (
        <div>
            <Text text="Home" />
            <Link to="/info/">To info</Link>
        </div>
    )
}

export default IndexPage

Gatsby Link API의 이점

• Gatsby는 `Prefetch`를 통해 페이지에서 사용할 리소스의 로딩 속도를 높인다
• 그럼 어떻게 페이지를 찾고 Prefetch를 진행할까?
• 이를 위한 것이 바로 Gatsby Link API에서 제공하는 `Link 컴포넌트`
• `페이지가 로딩`되면 Gatsby는 `리소스 로드 속도를 높이기 위해` 현재 페이지에서 사용되는 `모든 링크를 찾은 후, 각 링크 페이지를 미리 로드`하기 시작함
• 프로젝트에서 확인해보면 메인 페이지의 `로딩이 완료되면 Gatsby는 /info링크를 찾고 이 페이지를 미리 로드`한다
• 이를 통해 Gatsby는 `더 높은 사용자 경험`을 제공할 수 있는 것이다!