2024.03.07 TIL

useInfiniteQuery

• react-query의 Hook중 하나
• 사용자가 스크롤을 내릴 때마다 추가 데이터를 불러올 수 있는 무한 스크롤을 쉽게 구현할 수 있다

const {data, fetchNextPage, hasNextPage, isFetching} = useInfiniteQuery(queryKey, fetchFunction, options);

• queryKey
  - 쿼리를 식별하는 데 사용되는 고유 키
  - 여기서 쿼리란, 웹 애플리케이션에서 서버로부터 데이터를 비동기적으로 가져오는 요청 자체를 의미한다.
  - 예를 들어, ['books', location.search] 처럼 배열을 queryKey로 전달할 수 있는데, books는 이 쿼리(요청)가 책 데이터를 대상으로 한다는 것을 나타내고, location.search는 현재 페이지의 URL 쿼리 스트링을 의미한다. 이 URL 쿼리 스트링이 변경될 때마다, 해당 조건에 맞는 데이터를 서버로부터 새로 가져온다.
  - 캐싱과 무효화에 사용
• fetchFunction
  - 페이지 데이터를 가져오는 함수
  - {pageParam}을 인자로 받으며, 여기서 pageParam은 다음 페이지를 가져오기 위한 커서 또는 페이지 번호 등의 정보를 포함할 수 있다
• options
  - 쿼리 실행과 관련된 추가 설정을 제공하는 객체
  - 예를 들어, getNextPageParam 함수를 제공하여 다음 페이지 데이터를 가져올 때 사용할 pageParam을 결정할 수 있다

IntersectionObserver

IntersectionObserver는 웹 페이지 내의 특정 요소가 뷰포트(사용자가 현재 보고 있는 화면의 부분)와 교차하는지 비동기적을 감지하는 기능을 제공한다.

기본 사용 방법

1. IntersectionObserver 생성
   • IntersectionObserver 의 콜백 함수와 옵션 객체를 사용하여 인스턴스를 생성
   • 콜백 함수는 관찰하고 있는 요소가 뷰포트에 진입하거나 벗어날 때 호출된다
2. 요소 관찰 시작
   • 생성한 IntersectionObserver 인스턴스의 observe 메서드를 사용하여 관찰하고자 하는 대상 요소를 등록한다
3. 요소 관찰 중지
   • unobserve 메서드를 사용하여 특정 요소에 대한 관찰을 중지한다. 모든 관찰을 중지하려면 disconnect 메서드를 사용한다

예시 코드

const observer = new IntersectionObserver((entries) => {
	entries.forEach((entry) => {
		// entry.isIntersecting은 요소가 뷰포트에 교차하는지 여부를 나타낸다
		if (entry.isIntersecting) {
			console.log('요소가 뷰포트에 진입하였습니다.')
			// 요소에 대한 관찰 중지
			observer.unobserve(entry.target);
		}
	});
});
// observe 메서드를 사용하여 ...요소에 대한 감시 시작
observer.observe(...)