[TIL] 22.05.19

kyh·2022년 5월 19일
0

원티드 프리온보딩

목록 보기
10/12

useInfiniteQuery

  • React Query에서 제공하는 hooks
  • Infinite Scroll 기법을 적용해서 데이터를 보여주는데 이용할 수 있다.

Options

useQuery에서 부가적인 옵션이 더 추가된 형태로 옵션은 다음과 같이 존재한다.

  • getNextPageParam: (lastPage, allPages) => unknow | undefined
    • 데이터의 마지막 페이지와 모든 페이지의 전체 배열을 받는다.
    • 마지막 페이지에 대한 단일 변수를 반환하거나 이후 페이지가 없는 경우 undefined를 반환해야 한다.
  • getPreviousPageParam: (firstPage, allPages) => unknown | undefined
    • 데이터의 첫 페이지와 모든 페이지의 전체 배열을 받는다.
    • 마찬가지로 첫 페이지에 대한 단일 변수 혹은 이전 페이지가 없는 경우 undefined를 반환해야 한다.

반환 값(Returns)

마찬가지로 useQuery에서 일부 추가된 형태로 다음과 같이 있다.

  • data.pages: TData[] : 모든 페이지를 포함하는 배열
  • data.pageParams: unknown[] : 모든 페이지의 Params를 포함하고 있는 배열
  • isFetchingNexPage: boolean : fetchNextPage로 다음 페이지를 가져오는 동안 true 값을 갖는다.
  • isFetchingPreviousPage: boolean : fetchPreviousPage로 이전 페이지를 가져오는 동안 true 값을 갖는다.
  • fetchNextPage: (option?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
    • 결과에 대한 다음 페이지를 가져온다.
    • options.pageParam: unknown
      • 수동으로 페이지 매개변수 지정이 가능하다.
    • options.cancelRefetch: boolean
      • true(기본 값) : fetchNextPage를 반복적으로 호출하면 이전 호출이 해결되었는지 여부 관계 없이 매번 fetchPage가 호출된다.
      • false : fetchNextPage를 반복적으로 호출해도 첫 번째 호출이 해결될 때까지 fetchPage 호출을 수행하지 않는다.
  • fetchPreviousPage: (option?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
    • 결과에 대한 이전 페이지를 가져온다.
    • options.pageParam: unknown, options.cancelRefetch: booleanfetchNextPage와 같은 기능을 수행한다.
  • hasNexPage: boolean : 가져올 다음 페이지가 있으면 true가 되며, getNextPageParam 옵션을 통해 제어된다.
  • hasPreviousPage: boolean : 가져올 이전 페이지가 있으면 true가 되며, getPreviousPageParam 옵션을 통해 제어된다.

기업 과제

  • 페이지에 대한 무한 스크롤을 구현하는 방법은 여러가지 있지만, 현재 진행하고 있는 기업과제에서 React Query를 사용하고 있어서, 그에 관련한 방법을 고민하고 있다.
  • 검색 기능에서 이미 useQuery를 사용하고 있기 때문에, 구조 분해 할당으로 변수명들이 충돌되고 있다. 따로 파일을 분리해야 할지 고민하고 있지만, 어떻게 분리해야할지 아직 감이 잘 안온다.
  • useInfiniteQuery를 사용하면 API의 중첩 구조가 pageParam와 pages가 더 생기면서 타입 정의 등 많은 부분에서 에러사항이 발생하고 있지만 배열의 중첩 구조가 늘어난 것이기 때문에 데이터를 console로 확인하고 map과 flat을 이용해서 문제를 해결했다.
  • 현재는 getNextPage option을 이용해서 다음 페이지에 대한 부분을 처리하고 있지만 타입 지정에 문제가 있는지 문제가 잘 해결되지 않고 있다.
  • 맡은 기능에 대해 구현을 잘 수행하고 있지 못해서 팀원들에게 미안했다. 하지만 이렇게 무언가 도전하고 부딪히지 않으면 성장할 수 없을거라는 생각에 긍정적인 생각으로 버티는 하루였다.

4개의 댓글