페이지네이션 초간단 구현하기 (React)

📄리액트로 페이지네이션 초간단 구현하기

1. 기본 설계

페이지네이션은

- 현재 페이지
- 전체 페이지 수
- 한 페이지에 표시할 개수

가 필요하다!

const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 4; 

2. 데이터 필터링

const totalPages = Math.ceil(filteredHabits.length / itemsPerPage);
const displayedHabits = filteredHabits.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage,
);

한 페이지 당 4개가 보여야 하기때문에 slice를 해준다!!

ex) currentPage가 1일 때, (1 - 1) * 4 = 0 -> 첫 번째 항목부터 시작
ex) currentPage가 2일 때, (2 - 1) * 4 = 4 -> 5번째 항목부터 시작

3. 페이지네이션 컴포넌트 만들기

import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'

type PaginationProps = {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
}
export default function Pagination({
  currentPage,
  totalPages,
  onPageChange,
}: PaginationProps) {
  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return
    onPageChange(page)
  }

  return (
    <div className="mt-4 flex justify-center space-x-2">
      <button
        onClick={() => handlePageChange(currentPage - 1)}
        disabled={currentPage === 1}
        className="flex size-10 items-center justify-center rounded-full bg-gray-200 p-2 disabled:cursor-not-allowed"
      >
        <FiChevronLeft />
      </button>
      {Array.from({ length: totalPages }, (_, index) => (
        <button
          key={index}
          onClick={() => handlePageChange(index + 1)}
          className={`flex size-10 items-center justify-center rounded-full ${
            currentPage === index + 1 ? 'bg-green-30 text-white' : 'bg-gray-200'
          }`}
        >
          {index + 1}
        </button>
      ))}
      <button
        onClick={() => handlePageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
        className="flex size-10 items-center justify-center rounded-full bg-gray-200 p-2 disabled:cursor-not-allowed"
      >
        <FiChevronRight />
      </button>
    </div>
  )
}

• 이전 버튼: currentPage가 1이면 비활성화
  그 외에는 currentPage - 1을 호출하여 한 페이지 뒤로 이동
• 다음 버튼: currentPage가 totalPages와 같으면 비활성화
  그 외에는 currentPage + 1을 호출하여 한 페이지 앞으로 이동
• 페이지 번호 버튼: 각 페이지 번호를 클릭하면 해당 페이지로 이동하고, onPageChange 함수를 통해 currentPage를 업데이트한다.

4. 페이지네이션 컴포넌트 사용하기

부모컴포넌트에 페이지네이션 컴포넌트를 넣어주면 끝이돠. (위의 1, 2번도 부모에 넣어줘야함!!)

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={setCurrentPage}
/>