[React] 페이지네이션 구현하기(with. react-js-pagination)

회사에서 페이지네이션을 사용할 프로젝트가 생길 수도 있어서 연습 겸 만들어보았다! 🎇🎇

직접 구현해보려다가,, 라이브러리가 사용하기 정말 편하게 되어있어서 유혹을 떨치지 못하고,,,😌

그냥 라이브러리 사용해서 만들어보기로 했다. 직접 구현하는 건 11월 언젠간 해보는 걸로,,ㅎ 🤤

 

1. 일단 설치! 

리액트 프로젝트에 각자 사용중인 패키지 매니저 명령어를 따라 페이지 네이션 라이브러리를 설치해준다. 

$ npm install react-js-pagination
$ yarn add react-js-pagination

 

2. 필요한 state 및 변수, 함수 정의 (이름은 자유롭게 정하기)

 

 1) 전체 데이터 관리하는 state 

 2) currentPage 관리 state ( 사용자가 가장 최근 클릭한 페이지)

 3) postPage 관리 state( 한 페이지에 보여줄 게시글 개수)

 4) 변수 indexOfLastPost (마지막 게시글의 index)

 5) 변수  indexOfFirstPost ( 첫번째 게시글의 index)

 6) 변수 currentPosts (한 페이지 당 보여줄 게시글 목록들)

 7) 함수 paginationHandler : currentPage를 업데이트해주는 용도

    const [testData, setTestData] = useState('')
    const [currentPage, setCurrentPage] = useState(1);
    const [postPerPage, setPostPerPage] = useState(5); // 5개씩 게시글 나눔
    const indexOfLastPost = currentPage * postPerPage
    const indexOfFirstPost = indexOfLastPost - postPerPage; 
    const currentPosts = testData.slice(indexOfFirstPost,indexOfLastPost)
    
    const paginationHandler = (page) => {
    	setCurrentPage(page)
	};

 

 

3. 사용하려는 컴포넌트에서 Pagination  import 해주기

import Pagination from "react-js-pagination";

<Pagination
activePage={currentPage} // 현재 화면에 보여지는 페이지
itemsCountPerPage={5} // 페이지당 보여지는 목록 개수
totalItemsCount={testData.length} // 목록 총 개수
firstPageText={"<<"} // 1페이지로 이동할 때 사용할 icon또는 text
lastPageText={">>"} // 마지막 페이지로 이동할 때 사용할 icon 또는 text
prevPageText={"<"} // 이전페이지 이동시 사용할 icon 또는 text
nextPageText={">"} // 다음페이지 이동시 사용할 icon 또는 text
onChange={paginationHandler} // 페이지 번호 클릭시 실행 함수
 />

 

4. 받아온 data 원하는 형태로 가공해서 jsx 문법을 사용해서 return 

 

( 이 글에서는, json fake data를 사용함. 출처: https://jsonplaceholder.typicode.com/ )

<div className={"objBox"}>
      <h3>phone</h3>
      { Object.keys(currentPosts).map((key) => (
        <div key={key}><strong>No.{currentPosts[key].id}:</strong> {currentPosts[key].title}</div>
      ))}
</div>

이렇게 해주고 원하는 대로 스타일을 입혀주면,

완성! ✨✨✨ 엄청 간단하게 사용할 수 있다. 👍👍👍