[ReactNative] React-Query로 무한스크롤 적용하기

Today, What I learned?

리액트 쿼리를 이용해서 무한스크롤을 적용해 보았다.

무한스크롤로 데이터를 받아오는 것은 아직까지 시도해보지 못했던 기능이었는데 useInfiniteQuery 훅을 사용해서 생각보다 쉽게 적용할 수 있었다..!

 

 

FlatList

먼저 FlatList에서 무한스크롤을 위해 필요한 두 가지 속성을 추가해야 한다.

 <FlatList
     onEndReached={fetchMoreTopRated}
    onEndReachedThreshold={0.5}
    ... 
 />

• onEndReached
  끝점에 도달했을 때 실행시킬 함수가 들어가는 속성
• onEndReachedThreshold
  스크린 높이에 도달하기 전에 얼마큼 먼저 fetch 함수를 빠르게 실행시킬 것인지에 대한 속성. 숫자로 들어간다.
  1일 경우엔 끝에 도달했을 경우 실행된다.

 

로직의 구성

무한 스크롤이 어떤 방식으로 이루어지는지를 간략하게 정리하면 이렇다.

 

기존 배열 : [1,2,3,4]
무한 스크롤 시 추가로 fetch 해온 배열 : [5,6,7]

새로운 state : [1,2,3,4,5,6,7]

 

state에 계속 누적되어 갱신되는 것이 필요하다!
그럼 구체적으로 useInfiniteQuery 훅을 어떻게 써야 하는지 보자.

 

 

 

useInfiniteQuery

useInfiniteQuery 훅에 필요한 인자는 크게 세 가지다.

• 쿼리키
• fetch 함수
• 옵션 객체 (getNextParam가 들어감)

const {
    data: upcomingData, isLoading, fetchNextPage, hasNextPage} = useInfiniteQuery(['Movies', 'Upcoming'], 
getUpcomingMovies, {
    getNextPageParam: (lastPage) => {
      if (lastPage.page < lastPage.total_pages) {
        return lastPage.page + 1;
      }
    },
  });

위 코드가 적용한 코드인데 보면 이렇다.

 

쿼리키

쿼리키로 ['Movies', 'Upcoming'] 이렇게 두 개가 배열로 들어가 있다.
리액트 쿼리의 쿼리 키는 배열로 여러 개 전달해주기도 가능! Movies는 다른 useQuery 함수들과 공유하고 있는 키이다.

 

 

fetch 함수

이어서 getUpcomingMovies 라는 API와 통신하는, fetch 함수를 받아오고 있다.

하단부에 닿았을 경우 다음 페이지를 불러와야 하기 때문에 pageParam을 매개변수로 쓴다.

이 함수의 결과는 요런 형태이다.

{
   "pageParams":[
      "undefined"
   ],
   "pages":[
      {
         "dates":[
            "Object"
         ],
         "page":1,
         "results":[ // 진짜 필요한 데이터
            "Array"
         ],
         "total_pages":19,
         "total_results":378
      },
          {
         "dates":[
            "Object"
         ],
         "page":2,
         "results":[ // 진짜 필요한 데이터
            "Array"
         ],
         "total_pages":19,
         "total_results":378
      }
            ...
   ]
}

 

필요한 정보는 pages 속성 안의 각 객체 속 results 부분이라 객체를 배열로 매핑하는 과정 필요하다..!

// [{1페이지 dates, page...}, {}, {}]
// [[1페이지 영화정보..], [2페이지 영화정보..], []] // 각 요소를 results 배열로 치환 
data.pages.map(page => page.results)

위와 같이 map을 돌렸을 때 2차원 배열이기 때문에 flat()으로 평탄화가 필요하다!

그래서 최종적으로 flatList의 data 속성에 들어갈 코드는 이렇다.

data.pages.map(page => page.results).flat()

 

 

옵션 객체

마지막으로 옵션객체 안에서 getNextPageParam이라는 객체에서 콜백함수가 있다.

getNextPageParam: (lastPage) => {
      if (lastPage.page < lastPage.total_pages) {
        return lastPage.page + 1;
      }
},

이 콜백함수의 인자인 lastPage는 위 데이터구조의 pages 객체다.
pages 객체 안의 page가 total_page보다 작으면 page를 1 더해서 fetch 함수로 넘겨준다.

 

 

그럼 스크롤이 다 내려갈 때마다 아래와 같이 누적된다.

LOG  {"pageParams": [undefined], "pages": [{"dates": [Object], "page": 1, "results": [Array], "total_pages": 19, "total_results": 378}]}
 LOG  {"pageParams": [undefined], "pages": [{"dates": [Object], "page": 1, "results": [Array], "total_pages": 19, "total_results": 378}]}
 LOG  {"pageParams": [undefined, 2], "pages": [{"dates": [Object], "page": 1, "results": [Array], "total_pages": 19, "total_results": 378}, {"dates": [Object], "page": 2, "results": [Array], "total_pages": 19, "total_results": 378}]}
 LOG  {"pageParams": [undefined, 2], "pages": [{"dates": [Object], "page": 1, "results": [Array], "total_pages": 19, "total_results": 378}, {"dates": [Object], "page": 2, "results": [Array], "total_pages": 19, "total_results": 378}]}
 LOG  {"pageParams": [undefined, 2, 3], "pages": [{"dates": [Object], "page": 1, "results": [Array], "total_pages": 19, "total_results": 378}, {"dates": [Object], "page": 2, "results": [Array], "total_pages": 19, "total_results": 378}, {"dates": [Object], "page": 3, "results": [Array], "total_pages": 19, "total_results": 378}]}

 

 

 

최종적으로 적용하면 이렇다!

  <FlatList
      onEndReached={fetchMoreUpcoming}
      onEndReachedThreshold={0.5}
     ...
      data={upcomingData.pages.map((page) => page.results).flat()}
      renderItem={({ item }) => <UpcomingMovieItem movie={item} />}
      keyExtractor={(item) => item.id}
     ...
    />

리액트 네이티브에서 무한스크롤을 적용해보았으니 비슷한 원리로 리액트에서도 적용해볼 수 있지 않을까 싶다! 🤔