dukDukz
react-js-pagination 에 관해 본문
[React.js] API를 연동한 Pagination 구현
React Pagination 구현하기 리스트를 띄워줄 페이지를 만드는 과정에서 Pagination이 필요했다. 처음엔 Material-UI에서 제공하는 Pagination 컴포넌트를 이용해서 구현하려 했으나 문제가 있었다. 삽질끝에
cotak.tistory.com
이 글 을 참고해서 페이지 네이션을 구현했다.
[조건]
- API 통신 시 모든 데이터를 한번에 다 받아야 한다. (총 개수 필요함)
- 총 개수가 있으면 한번에 얼마나 display 할지 설정만 해주면 알아서 나오게 된다.
근데 이번에 진행한 프로젝트에서는 전체 개수가 아니라 각 페이지 별로 10개씩만 나오게 했기 때문에 이걸 사용하면 안됐다.
import ReactPaginate from "react-paginate";
이거로 바꿀 예정..
인줄 알았는데 바꿀 필요가 없었음
totalItemsCount={API 통신으로 오는 총 개수* 페이지 총 개수}이걸로 바꿔줬음
React | react-paginate로 빠르게 페이지네이션 구현하기
1. react-paginate install $ npm install react-paginate 2. 페이징 처리 할 컴포넌트에 import import ReactPaginate from "react-paginate"; 3. 필요에 맞게 커스텀 하여 사용 pageCount - 총 게시글의 개수(총..
gaemi606.tistory.com
'웹 개발 > React' 카테고리의 다른 글
| Error: No QueryClient set (0) | 2022.04.22 |
|---|---|
| React 리렌더링으로 인한 문제 (0) | 2022.04.05 |
| react drag and drop (0) | 2022.03.16 |
| useHistory 오류 발생 (0) | 2022.03.16 |
| useQuery - Missing queryFn error (0) | 2022.03.11 |