페이지네이션

페이지네이션은 배열 형태로 데이터를 가져와서 일정 크기로 잘라서 보여주는 것이다.

이를 구현하기 위해서 필요한 것은

 

총 게시물 갯수 totalCount

총 페이징 그룹 갯수 totalPages = Math.ceil(totalCount / limit)

한 페이지당 게시물 수 limit (viewPerPosts) 

페이지당 보여줄 버튼 수 viewPerPages

현재 페이지 번호 currPage

페이지 첫째 번호 firstNum = currPage - ( currPage - 1 % viewPerPages) + 1

페이지 끝 번호 lastNum = currPage - (currPage % viewPerPages) + 5

 

정도가 필요하다 

 

장점은 데이터를 가공하기가 한결 쉽다!

DB단에서 SQL문으로 트리구조로 데이터를 가져오거나 하면 가공하기가 어렵기도 하고 부담도 가는 등의 한계가 있는데

Javascript에서는 데이터 정렬도 수월하고 백엔드에서 직접 페이징처리 할 때처럼 여러번 DB에 요청을 넣지도 않는다.

 

직접 구현이 가능하대서 해봤는데

구글링해서 따라 해 본 예제 모두가 버그가 있었다. 분명 웹 사이트 개발 시에 필수 요소라서

제대로 만든 예제가 하나는 나올 줄 알았는데... Javascript 및 Jquery 예제는 React 개발 중이어서

완전히 동일하게 따라할 수는 없었다. 게다가 코드가 절차식인데, React면 당연 선언식으로 작성해야 보기 좋지 않겠나...?

 

대표적으로 데이터의 숫자가 너무 작거나 크면 페이지네이션 버튼이 제대로 표시되지 않는 문제였다.

범위 이상이 찍히거나 데이터가 없는 유령 버튼이 반복해서 출력되는 것.

 

사람들이 많이 사용하는 페이지네이션 오픈 소스 라이브러리는 크게 세 가지가 보였다.

1. react-js-pagination

주요 코드가 만들어진 지 8년이 넘은 것 같고, 최근 업데이트도 4년 전으로 되어 있었다.

이거 믿어도 되나...? 이상하게도 문서만 최근까지 갱신되었다.

코드 작성일을 보면 당연 class로 작성되었다고 봐야 할 듯.

공식 사이트와 문서는 오래 전에 폭파되어서 찾을 수 없다고 뜬다.

 

2. react-paginate

페이징 처리가 잘 작동은 하는 것 같은데 onPageChange 함수를 필요로 한다.

Offset과 관련된 함수인데, offset은 사용자가 작성해서 그려주려는 데이터에도 같이 적용해주어야 하는 것 같다.

기존에 잘 렌더링되던 컴포넌트가 깨지는 바람에 보류...

더욱이 twin.macro를 쓰는 나에게는 이 컴포넌트가 받는 css를 위한 ClassName props들이 하나도 작동하지 않는다.

emotion의 style prop을 내려주거나 감싸거나 하면 다를지 모르겠으나... 그러기 싫다. 귀찮아!

 

3. rc-pagination

중국 개발자가 만든 페이지네이션 라이브러리 같다.

locale 지원도 좋고 특정 페이지로 건너뛰는 jumper나 페이지당 게시물 수 조절도 지원한다.

그런데 사용 후기가 드물어서 개인적으로는 신뢰도가 낮다.