Front-End/React-Query 2

[React-Query / Spring Boot] 무한 스크롤 구현하기 (Full Stack Version) (useInfiniteQuery 무한 스크롤, Spring 무한 스크롤, No Offset)

필자는 Next.js와 Spring Boot를 이용해 서비스를 개발하고 있다. 이번에 무한 스크롤 기능이 필요했는데, No-Offset 방식의 레퍼런스가 많이 없어 애를 먹었다. 시행착오 끝에 잘 작동하여 이를 정리해보고자 한다. 근데 No-Offset이 뭐지? No-Offset 페이지네이션은 Offset을 사용하지 않고 페이지네이션을 진행한다는 말이다. Offset은 게임 개발할 때 많이 쓰이는 단어이기도 하다. 일반적으로 Offset을 사용하는 페이지네이션은 Offset(어디부터) limit(몇개의) 데이터를 불러올지 결정한다. 즉, 네이버 카페 같은 곳에서 볼 수 있는 위와 같은 번호들이 페이지 넘버이고 이 페이지 넘버가 Offset이라고 생각하면 된다. No-Offset은 이러한 Offset을 사..

[React-Query] useMutation 커스텀 훅 (react query useMutation Custom Hook Typescript)

React-Query의 useMutation을 커스텀 훅으로 만들어두면 편하다. 필자는 여기에 더해 mutate를 다루는 handler 함수를 정의하고 반환하는 방식의 커스텀 훅을 구현하였다. 아래는 예시 코드이다.(Typescript) 주석친 부분은 무시해도 된다. interface MutationProps { postId: number updatePostRequest: UpdatePostType } function usePostMutation( postInfoBeforeUpdate: PostInfoType, userId: number, updatedTitle: string, updatedContent: string, updatedIsAnonymous: boolean ): { handlePostMuta..

반응형