[Typescript] 무한스크롤(Infinity scroll)

 

사용한 기술: Supabase, Tanstack-Query, Typescript, Next.js

 

무한 스크롤은 사용자가 웹 페이지를 아래로 스크롤할 때 자동으로 새 콘텐츠를 로드하고 표시하는 웹 디자인 기법이다. 이를 통해 페이지 매김이 필요 없는 무한 스크롤 환경을 만들고 끊김 없이 매끄러운 탐색 환경을 제공한다.

 

본래 Tanstack-Query의 Infinite Queries를 사용하려 했으나

supabase에서 제공하는 데이터를 불러오는 API는 적용하기에는 부적합했다.

따라서 데이터를 fetch하는 것은 API를 사용하고, Tanstack-Query는 상태 관리만 사용하였다.

 

아래는 무한스크롤을 구현한 로직이다.1. 초기 데이터를 fetching한다. 이 데이터는 useSuspenseQuery를 사용해 데이터가 로드될 때까지 대기하도록 한다.2. 초기 데이터를 setState함수에 넣고 리스트업 한다.3. useRef를 사용하여 감지할 부분을 설정한다.4. 매번 감지하므로 useEffect로 scroll을 감지하는 이벤트리스너를 설정한다. return에는 이벤트리스너를 제거한다.5. debounce를 넣어 데이터가 지나치게 요청되는 것을 막아 데이터 누수를 일부 방지한다.6. 스크롤을 이동했을 때 페이지에서의 위치를 확인할 수 있게 window와 getBoundingClientRect()로 뷰포트의 상대적인 위치를 감지한다. 이 결과를 setState의 상태를 변화시켜 알려준다.7. 이 상태를 구독한 경우 새로운 데이터를 추가로 다운받는 쿼리를 작동시킨다.8. setState 함수를 사용하여 상태를 변화시켜 리스트에 추가한다.

 

무한스크롤을 구현할 때의 주의점이다.1. lodash 함수를 Typescript에서 사용할 때는 타입을 따로 다운받아야 한다.2. 무한스크롤이 한번만 추가적인 데이터를 불러오는 경우가 있다. 즉 이후의 데이터를 받아오지 못하는 상황이다.이것은 window에서 감지하는 innerHeight가 설정한 ref값보다 높은 것을 확인 후 추가로 데이터를 불러오는 부분에 문제가 생긴 경우다.보통은 footer가 있어 정상 작동하지만 미니프로젝트로서 데이터만 있는 경우 맨 아래까지 내려도 ref값이 innerHeight보다 더 낮아지지 않는다.이 경우 아래에 상자 하나를 두어 유한한 h 값을 할당하면 해결된다.

 

 

 

 

https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries

Infinite Queries | TanStack Query React Docs