[React] pagination 구현하기

커뮤니티 사이트 제작 중 사용했던 페이지네이션 모듈을 소개하고자 한다.
간단한 목록 페이지를 만들면서 해당 모듈이 쓰이는 방법을 단계별로 정리해보았다.

---

설치하기

npm i react-js-pagination

Paging 컴포넌트 생성

paging.js

import Pagination from 'react-js-pagination';

export const Paging = ({ page, count, setPage }) => {
  return (
    <Pagination
      activePage={page}
      itemsCountPerPage={7}
      totalItemsCount={count}
      pageRangeDisplayed={5}
      prevPageText={'‹'}
      nextPageText={'›'}
      onChange={setPage}
    />
  );
};

activePage: 현재 페이지
itemsCountPerPage: 한 페이지당 보여줄 리스트 아이템의 개수
totalItemsCount: 총 아이템의 개수
pageRangeDisplayed: Paginator 내에서 보여줄 페이지의 범위
prevPageText: "이전"을 나타낼 텍스트 (prev, <, ...)
nextPageText: "다음"을 나타낼 텍스트 (next, >, ...)
onChange: 페이지가 바뀔 때 핸들링해줄 함수
출처: https://cotak.tistory.com/112 [TaxFree:티스토리]

style도 추가해준다.

.gr {
  color: #808080;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
ul {
  list-style: none;
  padding: 0;
}
ul.pagination li {
  display: inline-block;
  width: 30px;
  height: 30px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
}

ul.pagination li a {
  text-decoration: none;
  color: #808080;
  font-size: 1rem;
}
ul.pagination li.active a {
  font-weight: 800;
}
ul.pagination li.active {
  font-weight: 800;
}
ul.pagination li a:hover,
ul.pagination li a.active {
  color: #808080;
}
.page-selection {
  width: 48px;
  height: 30px;
  color: #808080;
}

Paging 기능 추가

ListView.js

const [items, setItems] = React.useState([]) //리스트에 나타낼 아이템
const [count, setCount] = React.useState(0); //아이템 총 개수
const [currentpage, setCurrentpage] = React.useState(1); //현재페이지
const [postPerPage] = React.useState(7); //페이지당 아이템 개수

const [indexOfLastPost, setIndexOfLastPost] = React.useState(0);
const [indexOfFirstPost, setIndexOfFirstPost] = React.useState(0);
const [currentPosts, setCurrentPosts] = React.useState(0);

//items호출

React.useEffect(() => {
  setCount(items.length);
  setIndexOfLastPost(currentpage * postPerPage);
  setIndexOfFirstPost(indexOfLastPost - postPerPage);
  setCurrentPosts(items.slice(indexOfFirstPost, indexOfLastPost));
}, [currentpage, indexOfFirstPost, indexOfLastPost, items, postPerPage]);


const setPage = (e) => {
  setCurrentpage(e);
};

...

return (
  {currentPosts && items.length > 0 ? (
      currentPosts.map((item)=> (
          <div>{item.title}</div>
          <div>{item.content}</div>
      ))
     ) 
     : <div>게시물이 없습니다.</div>
	}
     <Paging page={currentpage} count={count} setPage={setPage} />
)