? Tanstack Query 사용해서 무한 스크롤 구현한 이유

useInfiniteQuery 훅을 통해 무한 스크롤 구현을 위한 강력한 기능을 제공

// useSearchResults.ts
export const useFeedSearchResults = (query: string, enabled = true) => {
  return useInfiniteQuery({
    queryKey: ['search', 'feeds', query],
    queryFn: ({ pageParam = 1 }) => 
      fetchFeedResults({ 
        query, 
        page: pageParam, 
        size: DEFAULT_PAGE_SIZE 
      }),
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.length < DEFAULT_PAGE_SIZE ? undefined : allPages.length + 1
    },
    initialPageParam: 1,
    enabled: !!query && enabled,
    staleTime: 5 * 60 * 1000,
  })
}

1. queryKey로 검색 유형과 쿼리를 명시하여 캐싱 키를 지정
2. queryFn에서 페이지 번호를 파라미터로 받아 API 호출
3. getNextPageParam을 통해 다음 페이지 여부를 결정하는 로직 포함
4. enabled 옵션으로 필요할 때만 쿼리 실행

자체 hook과 InfiniteScroll 컴포넌트 작성

1. useIntersectionObserver.ts

Intersection Observer API 사용하기 쉽게 만든 커스텀 훅

주요 기능

• useRef를 사용하여 DOM 요소(div)를 참조합니다.
• useState로 해당 요소가 화면에 보이는지(inView) 상태를 관리합니다.
• useEffect 내에서 Intersection Observer API를 사용하여 요소가 화면에 보이는지 감지합니다.
• 화면에 요소가 보이면 inView 상태를 true로 변경합니다.

반환 값

• ref: 감시할 DOM 요소에 연결할 ref
• inView: 요소가 화면에 보이는지 여부

이 훅은 "언제 사용자가 페이지 하단에 도달했는지" 감지하는 데 사용됩니다. 다른 외부 라이브러리에 의존하지 않고 직접 구현한 버전입니다. ( 외부 라이브러리 - react intersection observer 추천)