React Paginate를 사용하여 React Pagination 구축

우리는 종종 API를 통해 서버에서 대량의 데이터를 가져와서 화면에 렌더링해야 하는 웹 애플리케이션으로 작업합니다.

예를 들어 소셜 미디어 애플리케이션에서 사용자의 게시물과 댓글을 가져와서 렌더링합니다. HR 대시보드에는 지원한 ​​지원자에 대한 정보가 표시됩니다. 이메일 클라이언트에서는 사용자의 이메일을 보여줍니다.

모든 데이터를 한 번에 화면에 렌더링하면 웹 페이지에 존재하는 많은 수의 DOM 요소로 인해 웹 페이지 속도가 상당히 느려질 수 있습니다. 성능을 최적화하려면 다양한 기술을 채택하여 보다 효율적인 방식으로 데이터를 렌더링할 수 있습니다. 이러한 방법 중 일부는 가상화 및 페이지 매김과 함께 무한 스크롤을 포함합니다.

도구 및 패키지:
React
JSON Placeholder
react-paginate
Bootstrap

App.js

import "./App.css";
import ReactPaginate from "react-paginate";
import { useEffect, useState } from "react";

const App = () => {
  const [items, setItem] = useState([]);
  const [pageCount, setpageCount] = useState(0);
  let limit = 12;

  useEffect(() => {
    const getComments = async () => {
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/comments?_page=1&_limit=${limit}`
      );
      const data = await res.json();
      const total = res.headers.get("x-total-count");
      setpageCount(Math.ceil(total / 12));
      setItem(data);
    };
    getComments();
  }, []);

  const fetchComments = async (currentPage) => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/comments?_page=${currentPage}&_limit=12`
    );
    const data = await res.json();
    return data;
  };

  const handleClick = async (data) => {
    let currentPage = data.selected + 1;
    const commentsFormServer = await fetchComments(currentPage);
    setItem(commentsFormServer);
  };

  return (
    <div>
      <div className="row m-2">
        {items.map((item) => {
          return (
            <div key={item.id} className="col-sm-6 col-md-4 v my-2">
              <div className="card shadow-sm w-100" style={{ minHeight: 225 }}>
                <div className="card-body">
                  <h5 className="card-title text-center h2">Id :{item.id} </h5>
                  <h6 className="card-subtitle mb-2 text-muted text-center">
                    {item.email}
                  </h6>
                  <p className="card-text">{item.body}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <ReactPaginate
        previousLabel={"previous"}
        nextLabel={"next"}
        breakLabel={"..."}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={2}
        onPageChange={handleClick}
        containerClassName={"pagination justify-content-center"}
        pageClassName={"page-item"}
        pageLinkClassName={"page-link"}
        previousClassName={"page-item"}
        previousLinkClassName={"page-link"}
        nextClassName={"page-item"}
        nextLinkClassName={"page-link"}
        breakClassName={"page-item"}
        breakLinkClassName={"page-link"}
        activeClassName={"active"}
      />
    </div>
  );
};

export default App;

Github 리포지토리 링크: Github

팔로우: Github