[FE/BE] React - 페이지네이션 react-js-pagination

지금 프로젝트에서 페이지네이션이 들어갈 부분은 딱 한 곳.

⬆️이 부분이다.

 

위 사진은 내가 피그마로 대강 잡아본 레이아웃과 디자인이고

페이징도 대강 이쪽에 들어갈 예정이다~ 정도로 표시해둔 모습니다^0^

 

이 페이지의 주요 기능은 페이지네이션이고

처음 레이아웃을 잡을땐 한 페이지에 7개로 잡았는데

막상 만들어보니 5개가 딱 적당하고 좋았다.

 

페이지네이션은 서버에 들어가는 데이터가 있어야되고,

그래서 백단에서 만드는게 용이하겠다는 생각이라서

일단 나는 API를 넣기 전까지의 틀을 만들기로 했다.

 

API 넣은 최종본은 다음에 또 포스팅 할 예정💡

---

가장 하단의 페이징(<12345>) 완성 모습은!

---

 

페이지네이션 패키지를 사용하면 페이징을 쉽게 만들 수 있다고 해서

npm install react-js-pagination

react-js-pagination을 설치했다.

---

// Pagination.jsx

import Pagination from "react-js-pagination";

const Paging = () => {
    const [page, setPage] = useState(1);

    const handlePageChange = (page) => {
        setPage(page);
    };

    return (
        <Pagination
        // 현재 페이지
        activePage={page}

        // 한 페이지당 보여줄 리스트 아이템 개수
        itemsCountPerPage={5}

        // 총 아이템의 개수
        totalItemsCount={450}

        // paginator 내에서 보여줄 페이지의 범위
        pageRangeDisplayed={5}

        // <이전>을 나타낼 텍스트 (prev, < ...)
        prevPageText={"‹"}

        // <다음>을 나타낼 텍스트 (next, > ...)
        nextPageText={"›"}

        // 페이지가 바뀔 때 핸들링해줄 함수
        onChange={handlePageChange}
        />
    );
};

export default Paging;

// Friends.jsx

import Pagination from '../components/Pagination';

<div>
    <Pagination
      activePage={currentPage}
      itemsCountPerPage={itemsPerPage}
      totalItemsCount={friendsData.length}
      onChange={handlePageChange}
    />
</div>

패키지 강추🥰