React에서 페이지네이션을 쉽게 구현할 수 있도록 도와주는 라이브러리
옵션
pageCount : 총 게시글의 개수(row 개수). 이 값에 따라 페이지네이션의 버튼 수가 결정된다.
pageRangeDisplayed : 한 페이지에 표시할 게시글의 수
breakLabel : 끊김을 나타내는 표시. 빈 문자열로 설정하면 표시되지 않는다. ex) ...
previousLabel/nextLabel : 이전/다음 페이지로 가는 버튼의 value 값
onPageChange : 페이지 버튼을 눌렀을 때 일어나는 이벤트 (이를 이용해 페이지 증감)
containerClassName : 페이지네이션 컴포넌트를 감싸는 컨테이너 요소에 적용할 css 클래스명
activeClassName : 현재 활성화된 페이지에 적용할 css 클래스명
previousClassName/nextClassName : 이전/다음 페이지로 이동하는 버튼에 적용할 css 클래스명
marginPagesDisplayed : 페이지네이션의 양쪽 끝에 표시할 페이지의 수 ex) 'marginPagesDisplayed={1}'로 설정하면, 항상 첫 페이지1번과 마지막 페이지총 페이지 수 버튼이 표시된다.
pageRangeDisplayed : 현재 페이지를 기준으로 표시할 페이지의 범위 ex) 현재 페이지를 기준으로 앞뒤에 5개의 페이지가 표시된다.
pageClassName : 각 페이지 버튼에 적용할 css 클래스명
initialPage : 초기 페이지 번호 설정. 페이지네이션이 처음 렌더링될 때 어떤 페이지를 선택할지 결정한다.
renderOnZeroPageCount : 페이지 수가 0일 때 페이지네이션 컴포넌트를 렌더링할지 여부를 결정하는 옵션. ex) null로 설정하면 아무것도 렌더링되지 않는다. 페이지가 없을 때 페이지네이션 버튼을 표시하지 않도록 하는 데 유용하다.
forcePage : 현재 선택된 페이지를 강제로 설정하는 데 사용. 외부 상태에 따라 현재 페이지를 강제로 지정할 수 있다. ex) 페이지 리셋, 다른 컴포넌트에서 페이지 변경 발생 시 페이지네이션의 현재 페이지 동기화
문제 해결
❗️ 2번 버튼을 누르면 페이지 버튼이 1번~6번까지 표시된다.
