TIL DAY.36 [React] Pagination 코드

오늘은 내가 Brandi 협업을 진행하면서 까다로웠던 Pagination 기능 코드를 어떻게 구현했는지 알아보도록 하겠다.

먼저 Pagination을 구현하기 위해 쓴 코드는 아래와 같다.

 const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage, setPostPerPage] = useState(50);

  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = data.slice(indexOfFirstPost, indexOfLastPost);

  const paginate = (pageNumber) => setCurrentPage(pageNumber);
  
       <Pagination
            postsPerPage={postsPerPage}
            totalPosts={data.length}
            paginate={paginate}
            loading={loading}
          />

위는 부모 컴포넌트인 TableContainer.js 에서 작성된 코드이다.

import React from "react";

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <a onClick={() => paginate(number)} className="page-link">
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

위는 Pagination 기능에서 들어오는 데이터에 따라 버튼이 생기도록 하는 기능을 맞고 있는 Pagination.js이다.