[TIL] 20240611 - bookstore(8)

react-query : Infinite Queries

---

useInfiniteQuery는 동일한 useQuery를 무한정 호출할 때 사용

import { useInfiniteQuery } from "react-query";

const res = useInfiniteQuery(queryKey, queryFn);

• queryKey : useInfiniteQuery 마다 부여되는 고유 key 값

• queryfn: promise 처리가 이루어지는 함수
  
  

🧊 Use

import { useInfiniteQuery } from "react-query";

const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery(
    ["books", location.search], 
    ({ pageParam = 1 }) => getBooks({ pageParam }),
    {
      getNextPageParam: (lastPage) => {
        const isLastPage = Math.ceil(lastPage.pagination.totalCount / LIMIT) === lastPage.pagination.currentPage;

        return isLastPage ? null : lastPage.pagination.currentPage + 1;
      }
    }
  );

• pageParam : 현재 어떤 페이지에 있는지 나타내는 값

• getNextPageParam : 다음 페이지에 있는 데이터 조회

• fetchNextPage : 다음페이지의 데이터를 호출

• hasNextPage : boolean, 가져올 다음페이지가 있는지 여부

IntersectionObserver

---

IntersectionObserver는 타겟 요소와 상위 요소의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법

const observer = new IntersectionObserver(callback, options);

🧊 속성

IntersectionObserver.root : 바운딩 박스의 기준이 되는 Element or Document

IntersectionObserver.rootMargin : root 요소의 여백을 설정

IntersectionObserver.thresholds : 옵저버가 실행되기 위해 타겟이 얼마나 나타나야 하는지 백분율로 표시

🧊 메서드

IntersectionObserver.disconnect() : 모든 대상의 감시를 해제

IntersectionObserver.observe() : 주어진 대상을 감시

IntersectionObserver.takeRecords() : 모든 대상에 대한 IntersectionObserveEntry 배열을 반환

IntersectionObserver.unobserve() : 특정 대상에 대한 감시를 해제

🧊 Use

useEffect(() => {
    const observer = new IntersectionObserver(callback, options);
    
    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    return () => {
      if (targetRef.current) {
        observer.unobserve(targetRef.current);
      }
    };
  });