[포켓몬 도감 프로젝트] #8: 페이지네이션 기능 구현

 

📝 [포켓몬 도감 프로젝트] #7: 페이지네이션 기능 구현

 

 

🎯 목표

📄 페이징 기능: 한 번에 20개씩만 보여주기

 

 

---

 

✅  주요 기술 포인트

📄 페이징 기능

• 한 페이지에 20개의 데이터만 표시
• 페이지 번호를 누르면 해당 페이지 데이터가 렌더링됩니다. (URL 쿼리스트링도 같이 업데이트)
• 이전/다음 버튼은 전후 페이지의 처음/마지막 으로 이동

 

 

 🔹 페이지네이션 구성

• totalItems: 전체 데이터수
• limit : 한페이지당 보여질 갯수 (20개)
• pageCount : 페이지 그룹 갯수(5개씩)
• totalPages: 전체 페이지수
• pageGroup: 현재페이지의 그룹 인덱스
• startIdx: 현재페이지 그룹의 첫번째 페이지 넘버

 

  const totalPages = Math.ceil(totalItems / pageItems);

totalPages: 전체 데이터수 에서 한페이지당 보여질 아이템으로 나눈 갯수, 마지막 페이지도 보여야 되기 때문에 소숫점 반올림으로 계산
ex) 11개의 아이템이 있을때, 한번에 5개씩 보여지면 마지막 페이지까지 총 3페이지가 보여져야 된다.

 

  const pageGroup = Math.ceil(p / pageCount);

pageGroup: 현재페이지가 어느 페이지그룹에 위치해 있는지 페이지그룹의 순서를 나타낸다. 
ex) 페이지그룹을 5로 나눴을때  현재 2페이지는 첫번째 그룹, 6페이지는 두번째 그룹이 된다.

 

  const startIdx = (pageGroup - 1) * pageCount + 1;

startIdx: 현재 보여질 페이지그룹의 첫번째 인덱스, 이전페이지그룹의 마지막숫자를 구해서 +1을 시켜주는 형식으로 계산하였다.
ex) 5개로 페이지 그룹을 나눴을때, 1 ~ 5 은 1, 6 ~ 10은 6 이 된다.

 

 

📄  페이지네이션 로직

  const searchParams = useSearchParams();
  const p = Number(searchParams.get("p")) || 1;

총 데이터 갯수, 한페이지당 보여줄 아이템수, 페이지그룹의 수는 프롭으로 받아오고 현재페이지는 searchParams를 사용해 불러왔다.
페이지 계산 로직을 짜야되기 때문에 searchParams로 불러온 쿼리스트링은 Number를 사용해 숫자로 변환해준다.

 

  const pageArr = Array.from({ length: totalPages }, (_, i) => i + 1).splice(
    startIdx - 1,
    pageCount,
  );

pokemon api는 총 아이템 수가 "count: 1302" 식으로 만 나오기 때문에 배열을 만들어 줘야한다.
👉 Array.from을 사용해  인덱스에서 1씩 플러스 되는 length가  totalPages인 배열을 생성
👉 splice 함수를 사용해 현재 페이지 그룹만 렌더링 되도록 해준다.

 

//이전 페이지그룹 이동
{pageGroup !== 1 && (
    <li>
      <button
        onClick={() => goToPage(startIdx - 1)}
        className="cursor-pointer rounded px-2 py-1"
      >
        &lt;
      </button>
    </li>
)}


// 다음페이지 그룹 이동
{startIdx + pageCount - 1 < totalPages && (
    <li>
      <button
        onClick={() => goToPage(startIdx + pageCount)}
        className="cursor-pointer rounded px-2 py-1"
      >
        &gt;
      </button>
    </li>
  )}

👉 이전 버튼: 이전 페이지의 마지막으로 이동, 현재페이지가 1이 아닐경우(시작페이지)만 버튼이 활성화 된다.
👉 다음 버튼: 다음 페이지의 처음으로 이동, 현재페이지의 마지막 페이지 번호가 총 페이지 갯수보다 적을때만 버튼이 활성화된다.  

 

 

 

📌 전체 코드

"use client";

import { useRouter, useSearchParams } from "next/navigation";

export default function Pagination({
  totalItems,
  pageItems,
  pageCount,
}: {
  totalItems: number;
  pageItems: number;
  pageCount: number;
}) {
  const searchParams = useSearchParams();
  const p = Number(searchParams.get("p")) || 1;
  const router = useRouter();

  const totalPages = Math.ceil(totalItems / pageItems);
  const pageGroup = Math.ceil(p / pageCount);
  const startIdx = (pageGroup - 1) * pageCount + 1;
  const pageArr = Array.from({ length: totalPages }, (_, i) => i + 1).splice(
    startIdx - 1,
    pageCount,
  );

  const goToPage = (num: number) => {
    router.push(`/?p=${num}`);
  };

  return (
    <ul className="mt-6 flex justify-center gap-2 text-sm">
      {pageGroup !== 1 && (
        <li>
          <button
            onClick={() => goToPage(startIdx - 1)}
            className="cursor-pointer rounded px-2 py-1"
          >
            &lt;
          </button>
        </li>
      )}
      {pageArr.map((page) => (
        <li key={page}>
          <button
            className={`rounded px-3 py-1 ${p === page ? "bg-blue-500 text-white" : "bg-gray-200 text-black"}`}
            onClick={() => goToPage(page)}
          >
            {page}
          </button>
        </li>
      ))}
      {startIdx + pageCount - 1 < totalPages && (
        <li>
          <button
            onClick={() => goToPage(startIdx + pageCount)}
            className="cursor-pointer rounded px-2 py-1"
          >
            &gt;
          </button>
        </li>
      )}
    </ul>
  );
}

 

 

🎉 결과

👉 totalItems={150} pageItems={20} pageCount={5} 설정시 결과

1페이지

 

6페이지

 

 

🧠 오늘의 회고

이번편에서는 페이지네이션을 구현했는데, 버튼 클릭 자체는 쉬운 반면, 기능구현 전에 페이지네이션 알고리즘을 짜는 부분을 구성하는게 중요하다고 생각 되었다.

---