검색 리스트 Infinite Scroll

<aside> 💡

Mission

0. intersection observer 동작 원리

<aside> 📌

infinite scroll은 어떻게 동작하길래 사진을 끊임없이 불러올 수 있는 걸까요?

1.5배속으로 대충 어떤 느낌인지만 보세요
결국 텍스트로 요약하자면, 화면 중 맨 끝이 닿았을 때마다 계속 useQuery를 실행해서 다음 사진을 불러오는 것입니다 </aside>

1. react-intersection-observer 라이브러리 설치

import { useInView } from "react-intersection-observer";

  const { ref } = useInView({ ... }); //를 사용하여 맨 끝을 감지하게 해주세요

2. useInfiniteQuery

<aside> 📌

구글 검색 결과

</aside>

미리 공부하기

useInfiniteQuery는 React Query에서 제공하는 훅으로, 무한 스크롤과 같은 페이지네이션 기능을 구현할 때 매우 유용합니다. 다음은 useInfiniteQuery의 주요 특징과 사용 방법입니다:

데이터 페이징: 데이터를 여러 페이지로 나누어 로드할 수 있습니다.
자동 데이터 관리: 이전에 로드된 데이터를 캐시하고 관리합니다.
간편한 상태 관리: 로딩, 에러, 데이터 상태를 쉽게 관리할 수 있습니다.

기본 사용 예시:

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
});

주요 반환값:- data: 모든 페이지의 데이터를 포함하는 객체- fetchNextPage: 다음 페이지를 로드하는 함수- hasNextPage: 더 로드할 페이지가 있는지 여부- isFetchingNextPage: 다음 페이지 로딩 중 여부
무한 스크롤 구현: 스크롤 이벤트와 함께 사용하여 사용자가 페이지 하단에 도달했을 때 fetchNextPage를 호출합니다.

useInfiniteQuery를 사용하면 효율적이고 사용자 친화적인 무한 스크롤 기능을 쉽게 구현할 수 있습니다.

Intersection Observer

Intersection Observer는 웹 API로, 특정 요소가 뷰포트에 들어오거나 나가는 것을 감지하는 데 사용됩니다. 무한 스크롤 구현에 매우 유용합니다.

기본 개념: 관찰 대상 요소와 뷰포트(또는 특정 요소)의 교차점을 감지합니다.
효율성: 스크롤 이벤트보다 성능이 좋고, 불필요한 리소스 사용을 줄입니다.

사용 예시:

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    fetchNextPage();
  }
}, { threshold: 1.0 });

observer.observe(loadingRef.current);

무한 스크롤 적용: 페이지 하단에 요소를 배치하고, 이 요소가 화면에 보일 때 다음 데이터를 로드합니다.