React Query와 Intersection Observer를 활용한 무한스크롤 구현
·
프론트엔드 기록/리액트
서비스를 운영하면서 사용자가 증가함에 따라 페이지네이션 처리가 필요해졌다. 현재는 서비스 사용자가 많지 않지만, 언젠가는 꼭 필요한 기능이므로 미리 구현하는 것이 좋다고 판단했다.페이지네이션 처리 고민처음에는 넘버링 페이지네이션과 무한스크롤의 선택지가 있었다. 결국에는 팀 회의를 통해서 서비스에 맞는 무한스크롤 개념을 도입하기로 결정했다.현재는 CSR 기반 페이지로 구현이 되어있다. seo 개선을 위함과 초기 페이지 로딩 속도 향상을 위해서 SSR + ReactQuery로 마이그레이션을 예정되어 있어서, 마침 react-query의 useQuery의 useInfiniteQuery 기능으로 무한스크롤을 구현할 수 있다는 아이디어를 얻었다.  아이디어 고민 무한스크롤 적용이 필요한 페이지는 이미지와 같이 가..
ddhelop
'react query' 태그의 글 목록