GatsbyJS에서 페이지네이션(Pagination) 구현하기

GatsbyJS에서 페이지네이션(Pagination) 구현하기

웹사이트에서 많은 데이터를 한 페이지에 모두 표시하면 성능 저하와 가독성 문제가 발생할 수 있습니다.
이번 글에서는 GatsbyJS에서 GraphQL을 활용하여 블로그 및 목록 페이지에 페이지네이션 기능을 추가하는 방법을 설명하겠습니다. 🚀

---

1. 페이지네이션이 필요한 이유

✅ 페이지네이션을 적용해야 하는 이유

문제점 해결 방법

한 페이지에 너무 많은 콘텐츠 로드	페이지를 분할하여 성능 개선
사용자가 원하는 정보를 찾기 어려움	페이지 이동 기능 제공
SEO 문제 (스크롤 방식은 검색 엔진이 크롤링하기 어려움)	정적인 페이지네이션을 활용하여 SEO 향상

🚀 Gatsby에서는 gatsby-node.js를 활용하여 정적 페이지네이션을 구현할 수 있습니다.

---

2. GraphQL을 활용한 블로그 목록 페이지 만들기

먼저 블로그 글을 여러 페이지로 나눠서 표시할 수 있도록 GraphQL로 데이터를 가져옵니다.

✅ GraphQL 쿼리 (모든 블로그 글 가져오기)

query {
  allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
    totalCount
    nodes {
      frontmatter {
        title
        slug
        date
      }
    }
  }
}

✅ 결과 예시

{
  "data": {
    "allMarkdownRemark": {
      "totalCount": 15,
      "nodes": [
        {
          "frontmatter": {
            "title": "블로그 글 제목",
            "slug": "blog-post-1",
            "date": "2024-03-12"
          }
        }
      ]
    }
  }
}

🚀 이제 데이터를 기반으로 페이지네이션을 추가해보겠습니다.

---

3. gatsby-node.js에서 페이지네이션 구현

✅ 페이지네이션을 위한 gatsby-node.js 설정

반응형

const path = require("path");

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const blogListTemplate = path.resolve("src/templates/blog-list.js");

  const result = await graphql(`
    query {
      allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
        totalCount
        nodes {
          frontmatter {
            slug
            title
          }
        }
      }
    }
  `);

  const posts = result.data.allMarkdownRemark.nodes;
  const postsPerPage = 5;
  const numPages = Math.ceil(posts.length / postsPerPage);

  // 블로그 목록 페이지 생성
  for (let i = 0; i < numPages; i++) {
    createPage({
      path: i === 0 ? "/blog" : `/blog/${i + 1}`,
      component: blogListTemplate,
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    });
  }
};

✅ 설명

• postsPerPage = 5 → 한 페이지당 5개 게시글 표시
• numPages = Math.ceil(posts.length / postsPerPage) → 총 페이지 개수 계산
• createPage()를 사용하여 /blog/, /blog/2/, /blog/3/ 등의 페이지를 생성

🚀 이제 Gatsby가 자동으로 블로그 목록 페이지를 나눠서 생성합니다!

---

4. 페이지네이션 UI 추가 (blog-list.js)

이제 블로그 목록 페이지에서 페이지네이션 버튼을 추가하겠습니다.

✅ blog-list.js (페이지네이션 UI 포함)

import React from "react";
import { Link, graphql } from "gatsby";

const BlogList = ({ data, pageContext }) => {
  const posts = data.allMarkdownRemark.nodes;
  const { numPages, currentPage } = pageContext;

  return (
    <main>
      <h1>블로그 목록</h1>
      <ul>
        {posts.map(post => (
          <li key={post.frontmatter.slug}>
            <Link to={`/blog/${post.frontmatter.slug}/`}>
              {post.frontmatter.title}
            </Link>
          </li>
        ))}
      </ul>

      <nav>
        {Array.from({ length: numPages }).map((_, i) => (
          <Link
            key={i}
            to={i === 0 ? "/blog" : `/blog/${i + 1}`}
            style={{
              margin: "0 5px",
              textDecoration: currentPage === i + 1 ? "underline" : "none",
            }}
          >
            {i + 1}
          </Link>
        ))}
      </nav>
    </main>
  );
};

export const query = graphql`
  query ($skip: Int!, $limit: Int!) {
    allMarkdownRemark(sort: { frontmatter: { date: DESC } }, skip: $skip, limit: $limit) {
      nodes {
        frontmatter {
          title
          slug
        }
      }
    }
  }
`;

export default BlogList;

✅ 설명

• pageContext에서 currentPage와 numPages 값을 받아옴
• 페이지네이션 버튼을 동적으로 생성하여 사용자가 페이지 이동 가능

🚀 이제 /blog/ 페이지에 방문하면 페이지네이션이 적용된 블로그 목록이 표시됩니다!

---

5. 이전 페이지 및 다음 페이지 버튼 추가

추가적으로 "이전 페이지"와 "다음 페이지" 버튼을 제공하면 UX가 더욱 개선됩니다.

✅ 이전/다음 페이지 버튼 추가 (blog-list.js)

<nav>
  {currentPage > 1 && (
    <Link to={currentPage === 2 ? "/blog" : `/blog/${currentPage - 1}`}>
      ← 이전 페이지
    </Link>
  )}

  {Array.from({ length: numPages }).map((_, i) => (
    <Link
      key={i}
      to={i === 0 ? "/blog" : `/blog/${i + 1}`}
      style={{
        margin: "0 5px",
        textDecoration: currentPage === i + 1 ? "underline" : "none",
      }}
    >
      {i + 1}
    </Link>
  ))}

  {currentPage < numPages && (
    <Link to={`/blog/${currentPage + 1}`}>
      다음 페이지 →
    </Link>
  )}
</nav>

🚀 이제 사용자가 "이전 페이지" 또는 "다음 페이지" 버튼을 클릭하여 쉽게 이동할 수 있습니다.

---

6. 결론

이번 글에서는 GatsbyJS에서 GraphQL을 활용하여 페이지네이션을 구현하는 방법을 배웠습니다.
✔ gatsby-node.js에서 createPage()를 사용하여 페이지네이션 적용
✔ GraphQL의 limit과 skip을 활용하여 블로그 데이터를 분할
✔ 페이지네이션 UI를 추가하여 사용자 경험(UX) 개선
✔ 이전/다음 페이지 버튼을 추가하여 네비게이션 최적화

🚀 다음 글에서는 Gatsby에서 카테고리 및 태그 기반의 필터링 기능을 추가하는 방법을 다루겠습니다!