[Next.js + typescript] 페이지네이션(Pagination) 구현해보기
개요 페이지네이션의 구현을 도와주는 좋은 라이브러리도 많지만 next.js와 친숙해질겸 페이지네이션의 동작 방식도 익힐겸 간단하게 next.js 환경에서 구현해보았습니다. 요구 사항 모든 데이터를 한 번에 가져오는 것이 아니라 매 페이지를 누를 때마다 해당 페이지에 해당하는 API 요청만 합니다. 페이지의 총 개수는 전체 데이터 개수에 따릅니다. 예를 들어 한 페이지에 10개의 데이터를 표시하고 총 데이터의 개수가 38개라면 페이지의 개수는 4개가 되어야 합니다. 기호를 누르면 페이지를 한 칸씩 이동합니다. 주요 로직 우선 화면에 보여줄 데이터를 불러와보겠습니다. pagination/page.tsx export interface ItemsProps { Id: number; Name: string; Gra..
개발냥이/타입스크립트(Typescript)
2023. 7. 10. 08:57
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Algorithm
- Queue
- SQL
- 자바트리
- JPA
- SQLD
- 자바
- 스프링
- CS
- 자바bfs
- 형변환
- BFS
- Comparator
- 이분탐색
- Spring
- 정렬
- 해시맵
- 리액트
- 백준
- dfs
- 타입스크립트
- Nest
- 프로그래머스
- 자바dp
- 스프링부트
- java
- 알고리즘
- JavaScript
- DP
- 자바스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
글 보관함