[React] 페이지네이션 구현하기 (라이브러리 : react-js-pagination)

프로젝트를 진행하면서 기존에 무한스크롤을 구현해두었는데 웹페이지에서는 무한스크롤보다 페이지네이션 처리가 사용자에게 더욱 편리함을 준다는 회의결과가 있었다. 사실 나도 그렇게 생각한다. 물론 어떤 정보를 보여주느냐에 차이도 있지만 웹에서는 페이지를 이동하는 편이 더욱 편리하다고 느껴졌다.

 

페이지네이션을 직접 구현하는 방법도 구글에 많은 방법들이 소개되어 있었다. 하지만 해당 기능을 구현할 때, MVP기능 완성의 목표일까지 며칠 남지 않았던 상황인 터라 일단 라이브러리를 사용하면 좋겠다는 생각을 했다. (사실 라이브러리를 사용한다고 해도 내가 빠르게 흡수해서 사용할 수 있는지도 의문이였기 때문에 어쩔수 없는 선택이였다.)

 

그래서 구글링을 통해 얻은 라이브러리가 react-js-pagination 이라는 라이브러리였다.

https://www.npmjs.com/package/react-js-pagination  (해당 라이브러리 npm주소)

위 링크에 들어가면 read me 부분에 사용법이 아주 자세히 써있고 이것만 보고 사용해도 무리가 없다.

---

일단 내가 작성한 코드는 다음과 같다.

import Pagination from "react-js-pagination";

//페이지네이션이 눌릴때마다 themePage를 페이지에 맞게 설정
  const onPageHandler = (page) => {
    setThemePage(page - 1);   //저는 서버에서 페이지가 0부터 와서 -1을 해줘야 첫페이지를 불러올 수 있었습니다.)
  };


<Pagination
   activePage={현재페이지}
   itemsCountPerPage={한 페이지에 보여주는 데이터 수}
   totalItemsCount={총 데이터 수}
   pageRangeDisplayed={페이지 네이션에 보여줄 수}  //ex)5이면 < 1 2 3 4 5 > 이런 형태
   hideFirstLastPages={true}        //첫페이지로 이동하는 버튼을 숨김처리했음
   prevPageText={					
     themePagenation === 0 ? (      //themePagenation은 현재페이지 state입니다.
      <img src={prevgray} alt="next" />
                  ) : (
      <img src={prevgreen} alt="next" />
                  )
                }
   nextPageText={
      themePagenation + 1 === data.data.totalPages ? (
       <img src={nextgray} alt="next" />
                  ) : (
       <img src={nextgreen} alt="next" />
                  )
                }
   onChange={onPageHandler} //현재 페이지를 읽어주는 onChange 입니다. ex) 1페이지는 1을 반환합니다.
  />
              
 //prePageText와 nextPageText는 이전페이지와 다음페이지에 들어갈 문구를 의미한다.
 //내 프로젝트는 이전 페이지가 없는 경우 회색아이콘으로 바뀌고 있는경우 초록색 아이콘을
 띄워주는 디자인 요청을 받아서 삼항 연산자를 통해 아이콘 색을 바꿨다.
 //저처럼 다른 아이콘을 넣고 싶지 않으면 해당 속성은 지워도 됩니다. 지우면 <와 >가 기본
 디폴트 값으로 나오게 됩니다.

참고로 페이지네이션은 서버에서 페이징 처리가 된 데이터를 보여줄 때 사용합니다.

미리 알고 있어야 하는 정보는 총 데이터 수, 한 화면에 보여줄 데이터 수 입니다.

예를들어 총 100개의 데이터를 9개씩 보여주고 싶다 라고 하면 페이지네이션은 자동으로 12개의 페이지를 생성합니다.

ex) 100/9 = 11하고 남은 1개의 데이터를 보여주기 위해 마지막 12페이지를 만들게 되는 것입니다.

---

또한 이 라이브러리의 장점은 편리한 css수정이 있었습니다.

.pagination {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      align-items: center;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    ul.pagination li {
      display: inline-block;
      width: 50px;
      height: 50px;
      /* border: 1px solid #e2e2e2; */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
    }

    ul.pagination li:first-child {
      border-radius: 5px 0 0 5px;
    }

    ul.pagination li:last-child {
      border-radius: 0 5px 5px 0;
    }

    ul.pagination li a {
      text-decoration: none;
      color: black;
      font-size: 24px;
    }

    ul.pagination li.active a {
      color: white;
    }

    ul.pagination li.active {
      /* scale: 1.3; */
      border-radius: 50% 50%;
      background-color: var(--color-main);
    }

    ul.pagination li a:hover {
      color: black;
    }
    ul.pagination li a.active {
      color: blue;
    }

    .page-selection {
      width: 48px;
      height: 30px;
      color: #337ab7;
    }

---

생각보다 아주 간단하게 사용할 수 있는 라이브러리가 있어서 시간을 벌게 되었던 기억이 있다. 기존에 무한스크롤을 구현했을때 페이지네이션도 꼭 해봐야지 라는 생각이 있었는데 이렇게 직접 경험할 기회가 생겨 오히려 좋다는 생각이 있었다.