6 간단하게 페이지 띄워보기 - Gatsby에서의 페이지 이동 방법

source: categories/study/gatsby/gatsby_6.md

• 출처 / 인프런 개츠비 블로그

Anchor 태그를 통한 페이지 이동

앞서 설명했듯이 Gatsby 프로젝트에서는 src/pages 내의 모든 파일의 이름을 통해 페이지에 접근할 수 있다고 했었습니다.

따라서 만약 해당 디렉토리에 about.tsx 파일이 존재한다면 Gatsby 내부적으로 your-web-site.com/about과 같은 페이지 링크를 생성합니다.

여기서 about.tsx 파일을 src/pages/info 디렉토리로 이동한다면 페이지 링크는 어떻게 변할까요?

Gatsby는 이에 맞게 디렉토리명도 반영하므로 your-web-site.com/info/about과 같은 페이지 링크를 생성할 것입니다.

그러기 때문에 우리는 어떤 페이지가 생성될 지 충분히 알 수 있어 단순 Anchor 태그를 통해 페이지를 이동할 수 있도록 개발해도 상관없습니다.

먼저 이 방식을 통해 페이지 이동을 간단하게 구현해봅시다.

저희는 저번에 src/pages 폴더 내에 info.tsx 파일을 만들었기 때문에 메인 페이지 컴포넌트에서 /info로 이동해주는 Anchor 태그를 생성해주면 됩니다.

index.tsx 파일을 다음과 같이 수정해봅시다.

• src/pages/index.tsx

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

const IndexPage: FunctionComponent = function () {
  return (
    <div>
      <Text text="Hello, World!" />
      <a href="/info/">To Info</a>
    </div>
  )
}

export default IndexPage

Anchor 태그를 다음과 같이 추가한 후, 로컬 서버를 실행시켜 확인해보세요.

정상적으로 페이지 이동이 이뤄지는 것을 확인해볼 수 있습니다.

마찬가지로 info.tsx 파일에서도 메인 페이지로 이동하는 Anchor 태그를 추가해봅시다.

• src/pages/info.tsx

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

type InfoPageProps = {
  data: {
    site: {
      siteMetadata: {
        title: string
        description: string
        author: string
      }
    }
  }
}

const InfoPage: FunctionComponent<InfoPageProps> = function ({
  data: {
    site: {
      siteMetadata: { title, description, author },
    },
  },
}) {
  return (
    <div>
      <Text text={title} />
      <Text text={description} />
      <Text text={author} />
      <a href="/">To Main</a>
    </div>
  )
}

export default InfoPage

export const metadataQuery = graphql`
  {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
  }
`

태그를 추가한 뒤, 결과를 확인해봅시다.

페이지 이동은 정상적으로 이루어지나, 이동하는 과정에서 새로고침 현상이 발생하게 됩니다.

일반적인 웹 사이트에서도 볼 수 있는 현상이지만, Gatsby에서는 보다 더 나은 사용자 경험을 위해 자체적으로 API를 제공하고 있습니다.

Gatsby Link API를 통한 페이지 이동

Gatsby에서는 기본적으로 페이지 이동을 위한 API를 제공하고 있습니다.

해당 API가 바로 Gatsby Link API인데요, 이 API를 통해 페이지 이동을 구현하면 보다 더 높은 성능의 정적 사이트를 구현할 수 있습니다.

먼저 이 API를 통해 페이지 이동을 구현한 다음, 결과물을 보며 어떤 차이점이 있는지 확인해봅시다.

Gatsby Link API는 다음과 같이 사용합니다.

• src/pages/index.tsx

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

const IndexPage: FunctionComponent = function () {
  return (
    <div>
      <Text text="Hello, World!" />
      <Link to="/info/">To Info</Link>
    </div>
  );
};

export default IndexPage;

3번째 줄과 원래 Anchor 태그가 있던 줄을 확인해보세요.

Gatsby에서 제공하는 Link 태그를 통해 페이지 이동을 구현할 수 있는데, 경로를 to라는 이름의 props로 전달합니다.

사용법은 되게 간단합니다.

그럼 info.tsx 파일에서도 Gatsby Link API를 통해 구현해봅시다.

• src/pages/info.tsx

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

// ...

const InfoPage: FunctionComponent<InfoPageProps> = function ({
  data: {
    site: {
      siteMetadata: { title, description, author },
    },
  },
}) {
  return (
    <div>
      <Text text={title} />
      <Text text={description} />
      <Text text={author} />
      <Link to="/">To Main</Link>
    </div>
  )
}

// ...

마찬가지로 4번째 줄과 원래 Anchor 태그가 있던 줄을 확인해주세요.

페이지 경로를 제외하면 index.tsx 페이지와 거의 동일하게 변경되었습니다.

그럼 이제 결과를 확인해봅시다.

로컬 서버를 실행시키고, 페이지를 열어 링크를 클릭해보세요.

단번에 차이점이 느껴지시나요?

Gatsby Link API의 성능상 이점

Gatsby는 Prefetch를 통해 페이지에서 사용할 리소스의 로딩 속도를 높인다고 합니다.

그럼 어떻게 페이지를 찾고 Prefetch를 진행할까요?

이를 위한 것이 바로 Gatsby Link API에서 제공하는 Link 컴포넌트입니다.

페이지가 로드되면 Gatsby는 리소스 로드 속도를 높이기 위해 현재 페이지에서 사용되는 모든 링크를 찾은 후, 각 링크의 페이지를 미리 로드하기 시작합니다.

우리가 생성한 프로젝트에서 확인해보면 메인 페이지의 로딩이 완료되면, Gatsby는 /info 링크를 찾고, 이 페이지를 미리 로드하는 것이죠.

이를 통해 Gatsby는 더 높은 사용자 경험을 제공할 수 있는 것입니다.