[react] 리액트 pagination 구현(react-js-pagination)

9/23

클론코딩 팀프로젝트 중에 페이지 넘기는 방법을 무한스크롤에서 pajination으로 변경함

 

라이브러리 설치

npm install react-js-pagination

사용

1. 라이브러리 import

import Pagination from 'react-js-pagination';

 

2. parameter로 사용할 state 설정

const [page, setPage] = useState(1);	//페이지 설정
const [items, setItems] = useState(18); //한페이지에 보여줄 데이터 갯수
const handlePageChange = page => {		//페이지 바뀔때 함수
	setPage(page);
};
const length = props.product.length;	//전체 데이터 갯수

 

3. Pagenation 구현할 부분에 넣기

<PaginationWapper>					//Styled-component임
	<Pagination					
		activePage={page}			 //현재 페이지
		itemsCountPerPage={items}    //페이지당 아이템 갯수
		totalItemsCount={length}	 //전체 아이템 갯수
		pageRangeDisplayed={10}		 //한번에 보여지는 페이지 range
		onChange={handlePageChange}  //페이지 바뀔때 핸들링하는 함수
		hideNavigation={true}		 //navigation 버튼 숨기기(prev page, next page)
		hideFirstLastPages={true}	 //첫페이지, 끝페이지 버튼 숨기기
	/>
</PaginationWapper>

 

4. style 설정

결과

 

참고: https://www.npmjs.com/package/react-js-pagination