How to Implement Pagination: Claude Code 활용 가이드

페이지네이션구현をClaude Code로 효율화하기

페이지네이션は一見シンプルですが、UI컴포넌트、API설계、쿼리최적화と幅広い知識が求められます。Claude Code를 사용하면 要件を伝える만으로프론트엔드から백엔드まで一貫した구현を생성할 수 있습니다。

オフセットベースの페이지네이션

もっとも기본적인パターンです。Claude Code에次처럼依頼します。

> 페이지네이션付きの글목록컴포넌트をReactで作って。
> 1페이지10件、페이지番号표시、前後移動버튼あり。

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

  // 표시する페이지番号を絞る（現在페이지の前後2페이지）
  const visiblePages = pages.filter(
    (p) => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2
  );

  return (
    <nav className="flex items-center gap-1">
      <button
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
        className="px-3 py-1 rounded disabled:opacity-50"
      >
        Previous
      </button>

      {visiblePages.map((page, i) => {
        // 省略記号の표시
        const prev = visiblePages[i - 1];
        const showEllipsis = prev && page - prev > 1;

        return (
          <span key={page}>
            {showEllipsis && <span className="px-2">...</span>}
            <button
              onClick={() => onPageChange(page)}
              className={`px-3 py-1 rounded ${
                page === currentPage ? "bg-blue-600 text-white" : "hover:bg-gray-100"
              }`}
            >
              {page}
            </button>
          </span>
        );
      })}

      <button
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
        className="px-3 py-1 rounded disabled:opacity-50"
      >
        Next
      </button>
    </nav>
  );
}

カーソルベースの페이지네이션

大量데이터의 경우はカーソルベースが효율적입니다。APIと프론트엔드の両方を一度に생성할 수 있습니다。

// APIルート（Next.js App Router）
import { db } from "@/lib/database";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const cursor = searchParams.get("cursor");
  const limit = parseInt(searchParams.get("limit") || "20");

  const items = await db.post.findMany({
    take: limit + 1, // 次페이지の存在확인用に1件多く취득
    ...(cursor && {
      cursor: { id: cursor },
      skip: 1,
    }),
    orderBy: { createdAt: "desc" },
  });

  const hasMore = items.length > limit;
  const data = hasMore ? items.slice(0, -1) : items;
  const nextCursor = hasMore ? data[data.length - 1].id : null;

  return Response.json({ data, nextCursor, hasMore });
}

無限스크롤の구현

Intersection Observer API를 사용한無限스크롤も、Claude Code를 사용하면簡潔に구현할 수 있습니다。

import { useEffect, useRef, useState, useCallback } from "react";

interface Item {
  id: string;
  title: string;
}

export function InfiniteList() {
  const [items, setItems] = useState<Item[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const loaderRef = useRef<HTMLDivElement>(null);

  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;
    setLoading(true);

    const params = new URLSearchParams({ limit: "20" });
    if (cursor) params.set("cursor", cursor);

    const res = await fetch(`/api/items?${params}`);
    const data = await res.json();

    setItems((prev) => [...prev, ...data.data]);
    setCursor(data.nextCursor);
    setHasMore(data.hasMore);
    setLoading(false);
  }, [cursor, hasMore, loading]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) loadMore();
      },
      { threshold: 0.1 }
    );

    if (loaderRef.current) observer.observe(loaderRef.current);
    return () => observer.disconnect();
  }, [loadMore]);

  return (
    <div>
      {items.map((item) => (
        <div key={item.id} className="p-4 border-b">
          {item.title}
        </div>
      ))}
      <div ref={loaderRef} className="p-4 text-center">
        {loading && "Loading..."}
        {!hasMore && "All items displayed"}
      </div>
    </div>
  );
}

기본적인使い方はClaude Codeの入門가이드を、プロンプトの工夫はプロンプトを改善する5つのTips를 확인하세요.

정리

Claude Code를 활용하면 オフセット타입、カーソル타입、無限스크롤など、要件に合った페이지네이션を短시간で구현할 수 있습니다。APIからUIまで一貫した설계が得られるのが大きなメリットです。

자세한 내용은Claude Code공식 문서를 확인하세요.