[42gg] 페이지네이션 구현

지난 무한 스크롤 포스트에 이어 이번에는 페이지네이션 구현에 대한 내용이다.

실시간 통신을 하지 않는 서비스에서는 무한 스크롤이 가지는 단점이 커서 프로젝트에서는 페이지네이션으로 변경해주었다.

페이지네이션

• 페이지네이션은 리스트를 페이지별로 나누어서 보여주는 기능이다. 프로젝트에서는 패키지를 사용하여 페이지네이션을 구현했다.
  https://www.npmjs.com/package/react-js-pagination

  import Pagination from 'react-js-pagination';
  import {
   IoPlaySkipBackSharp,
   IoPlaySkipForwardSharp,
   IoCaretBackSharp,
   IoCaretForwardSharp,
  } from 'react-icons/io5';
  
  interface GreetingProps {
   curPage: number | undefined;
   totalPages: number | undefined;
   pageChangeHandler: (page: number) => void;
  }
  
  function PageNation({
   curPage = 1,
   totalPages,
   pageChangeHandler,
  }: GreetingProps) {
   return (
     <>
       {totalPages && (
         <Pagination
           activePage={curPage} //현재 페이지
           itemsCountPerPage={1} // 페이지 수
           pageRangeDisplayed={5} // 페이지네이션에서 보여줄 페이지 범위
           totalItemsCount={totalPages} // 총 페이지 수
           firstPageText={<IoPlaySkipBackSharp />} // 첫 페이지로 이동하는 아이템
           lastPageText={<IoPlaySkipForwardSharp />} // 마지막 페이지로 이동하는 아이템
           prevPageText={<IoCaretBackSharp />} // 이전 페이지로 이동하는 아이템
           nextPageText={<IoCaretForwardSharp />} // 다음 페이지로 이동하는 아이템
           onChange={pageChangeHandler} // 페이지 이동 핸들링 함수
         />
       )}
     </>
   );
  }

• 위 코드를 실행하면 페이지네이션의 아이템들이 새로로 정렬이 된다. 이 부분은 css를 통해 가로로 정렬시켜주고 꾸며주도록 하자.

• 페이지네이션 컴포넌트는 페이지네이션이 필요한 리스트 아래쪽에 위치시켜주면 된다.

   const pageChangeHandler = (pages: number) => {
     setPage(pages);
     router.push('/rank');
   };
  
  return (
     <div className={styles.container}>
       <div className={styles.division}>
         <div>순위</div>
         <div>intraID (점수)</div>
         <div>상태메시지</div>
         <div>승률</div>
       </div>
       {rankData?.rankList.map((item: Rank, index) => (
         <RankItem
           key={item.intraId}
           myIntraId={rankData.myIntraId}
           index={index}
           user={item}
           isMain={false}
         />
       ))}
       <PageNation
         curPage={rankData?.currentPage}
         totalPages={rankData?.totalPage}
         pageChangeHandler={pageChangeHandler}
       />
     </div>
  );

참고

• https://cotak.tistory.com/112