use-query)useInfiniteQuery를 사용해보자.

작업 도중 데이터가 누적되어 쌓일 경우 데이터를 가져오는 것에서 시간이 걸릴 것을 예상해 

Infinity Scroll를 구현하려 한다.

원래라면 Debounce 등을 이용해 구현했겠지만, 이미 해당 기능에 대한 라이브러리가 존재했었고,

친절한 Tanstack팀은 use-query에 무한 스크롤 기능까지 만들어두었었다.

우선 use-query의 Infinite Scroll 기능인 useInfiniteQuery는 다음과 같은 형태를 띈다.

 

const {data, isLoading, ..., fetchNextPage} = 
useInfiniteQuery(key,QueryFn, {
...Options,
getNextPageParam:(lastPage, pages) =>{
	return lastPage.nextPage + 1	
	}
})

기본적인 형태는 일반적인 use-query와 흡사하다.

key값 등의 기존 use-query에 존재했던 것들을 제외한 중요하게 봐야할 것은 fetchNext와 getNextPageParam이다.

우선 fetchNext()는 use-query의 refetch()처럼 호출할 수 있는데,

해당 함수를 호출할 시, queryFn에서 넘겨받은 콜백이 다음 Get요청을 보낼 정보를 매개변수로 받아 요청이 이루어진다.

 

옵션의 getNextPageParam은 불러올 데이터가 더 있는지 여부와 그 정보를 담는다.

더이상 불러올 정보가 없다면, undefined를 return하면 된다.

마찬가지로 queryFn의 매개변수로 활용된다.

 const fetchInfiniteLog = async ({ pageParam = 0 }) => {
    const params = {
      ...params,
      pageParam,
    };
    let data;
    await axios
      .get(`${APIADDRESS}/get_datas`, { params })
      .then((res) => (data = res.data.data));

    let result = {
      data,
      nextPage: pageParam,
    };
    return result;
  };

queryFn에서 리턴 받은 값은,

페이지 정보와, 가져온 data의 정보이다.

1. pageParams: (4) [undefined, 1, 2, 3]
2. pages: (4) [{…}, {…}, {…}, {…}]

pageParams는 말 그대로 페이지에 대한 정보이고

pages는 api.get을 통해 받아온 정보들이다.

 

위 기능은 단순히 페이지를 나누어 fetch하는 기능일 뿐이다.

무한 스크롤을 구현하기 위해선 스크롤 이벤트와, 사용자가 설정한 ref를 관측할 필요가 있지만

useInView는 해당 기능을 간편하게 제공한다.

 

  const [ref, inView] = useInView();
  
    useEffect(() => {
    if (inView) {
      console.log("fdsf");
      fetchNextPage();
    }
  }, [inView]);
  
  retrun (
  	<div ref={ref}></div>
  )

useInView

 

useInView의 ref를 선언하고 관찰하고 싶은 곳에  ref를 선언하면 된다.