[React] React Query의useInfiniteQuery에서 무한 스크롤

개시하다
React Query의useInfiniteQuery()에서 무한 스크롤을 구현해 문장으로 정리했다.
"React Query가 뭐예요?"가능하다면 지난번 보도를 보십시오.
이른바 useInfiniteQueryuseInfiniteQuery() 일부 데이터가 되돌아오는 다음 조회를 추적합니다.
반환useQuery()data의 내용은 다르고 pagespageParams 두 속성을 포함하는 대상이다.pages는 검색 결과를 수조로 되돌려주고, pageParams는 이미 실행된 검색 키를 수조로 되돌려준다.
위는pages, 아래는pageParams의 결과의 예이다.

또한 useInfiniteQuery()의 기술 예는 다음과 같다.
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetching,
    isError,
    error,
  } = useInfiniteQuery(
    'sw-people',
    ({ pageParam = initialUrl }) => fetchUrl(pageParam),
    {
      getNextPageParam: (lastPage) => lastPage.next || undefined,
    }
  );
pageParam에서 초기값defaultUrl으로 설정되었으나 옵션getNextPageParam을 통해 업데이트되었습니다.
이상의 예에서 최신 페이지의 데이터lastPage 중 다음pageParamlastPage.next || undefined로 설정하고 allPages 파라미터를 사용할 수 있다.
이렇게 하면 pageParam의 현재 값이 React Query에서 관리됩니다.
또한useInfiniteQuery() 되돌아오는 대상 속성 중useQuery()에 없는 다음과 같은 속성이 존재한다.
  • fetchNextPage: 다음 페이지의 데이터를 되찾을 수 있는 함수
  • hasNextPage: getNextPageParam가 업데이트pageParam되면 true(undefined시false
  • 로 돌아갑니다.
  • isFetchingNextPage: fetchNextPage에서 다음 페이지의 데이터를 받았을 때true 되돌아오기(loading 로고에 사용)
  • 지금까지 등장한 단어를 실제 데이터로 얻는 절차는 다음과 같다.
  • 구성 요소가 첫 페이지로 마운트됨
  • getNextPageParam 업데이트 pageParam
  • hasNextPage인 경우 이벤트(스크롤 또는 버튼 클릭)로 수행true

  • 2→3 반복fetchNextPage까지hasNextPage
  • 설치 예undefined 및 React Infinite Scroller를 사용하여 무한 스크롤을 수행합니다.
    InfinitePeople.jsx
    import InfiniteScroll from 'react-infinite-scroller';
    import { useInfiniteQuery } from 'react-query';
    import { Person } from './Person';
    
    const initialUrl = 'https://swapi.dev/api/people/';
    const fetchUrl = async (url) => {
      const response = await fetch(url);
      return response.json();
    };
    
    export function InfinitePeople() {
      const {
        data,
        fetchNextPage,
        hasNextPage,
        isLoading,
        isFetching,
        isError,
        error,
      } = useInfiniteQuery(
        'sw-people',
        ({ pageParam = initialUrl }) => fetchUrl(pageParam),
        {
          getNextPageParam: (lastPage) => lastPage.next || undefined,
        }
      );
    
      if (isLoading) return <div className="loading">Loading...</div>;
      if (isError) return <div>Error! {error.toString()}</div>;
    
      return (
        <>
          {isFetching && <div className="loading">Loading...</div>}
          <InfiniteScroll loadMore={fetchNextPage} hasMore={hasNextPage}>
            {data.pages.map((pageData) => {
              return pageData.results.map((person) => {
                return (
                  <Person
                    key={person.name}
                    name={person.name}
                    hairColor={person.hair_color}
                    eyeColor={person.eye_color}
                  />
                );
              });
            })}
          </InfiniteScroll>
        </>
      );
    }
    
    useInfiniteQuery()에서 react-infinite-scroll를 가져온 후 InfiniteScroll 구성 요소를 봉합니다.Person 속성loadMorefetchNextPage 속성hasMore으로 설정하면 다음 페이지의 데이터 추출을 제어할 수 있습니다.
    참고 자료

    좋은 웹페이지 즐겨찾기