프론트엔드2 [Next.js] 페이지네이션 구현하기, 무한스크롤 (react-query) 목표- 리액트 쿼리를 사용해 재사용성이 높은 페이지네이션 훅을 만든다- 한 페이지에 보여줄 데이터 개수를 정할 수 있다 목차1. 초기 설정2. 데이터 불러오기 (렌더링하기)3. 무한스크롤 구현하기4. 전체 코드 [1. 초기설정]0. 예시로 댓글을 렌더링하는 코드를 구현한다 1. 서버 코드- 여기에서 확인할 수 있다 2. 데이터 타입// src/types/comment.type.tsexport type DComment = { id: number; nickname: string; content: string;}; 3. api연결- getComment- 페이지값(page)과 한 페이지에 보여줄 댓글 개수(limit)를 통해 댓글을 조건에 맞게 가져온다- 반환 타입은 앞서 설정한 DComment의 배열 형.. 2024. 7. 4. [Next.js] 페이지 기반 페이지네이션 구현하기 (react-query) 목표- 리액트 쿼리를 사용해 재사용성이 높은 페이지네이션 훅을 만든다- 한 페이지에 보여줄 데이터 개수를 정할 수 있다- 페이지 번호를 클릭하면 해당 페이지로 이동한다- '이전', '이후' 버튼을 사용해 다른 데이터를 렌더링할 수 있다- 마지막 페이지일 경우, 이후페이지를 클릭할 수 없고 첫 페이지일 경우 이전 페이지를 클릭할 수 없다 목차1. 초기 설정2. 데이터 불러오기 (렌더링하기)3. 페이지 버튼 구현하기 - 훅 구현4. 데이터 가져오기 및 이전페이지, 이후페이지 구현하기 - 훅 구현5. 전체 코드[1. 초기 설정]0. 예시로 댓글을 렌더링하는 코드를 구현한다 1. 서버 코드- 여기에서 확인할 수 있다 2. 데이터 타입// src/types/comment.type.tsexport type DCom.. 2024. 7. 4. 이전 1 다음
