searchMovies에서 hasNextPage가 필요한 이유

Question

안녕하세요 로펀님. 강의 잘 듣고 있습니다.

useInfiniteQuery에서 반환하는 hasNextPage를 이용해 fetchNextPage를 하는데 searchMovies에서 작성한 const hasNextPage = count > page * pageSize 는 사용하지 않는 것 같아서 질문 올립니다!

{data?.pages

?.map((page) => page.data)

?.flat()

?.map((movie) => (

))}

에서도 searchMovies 에서 반환하는 page, pageSize, hasNextPage를 제외하고 data만 쓰시길래 작성하신 이유가 궁금합니다. useInfiniteQuery에서 반환하는 hasNextPage와는 다른 건가요??

로펀 · Answer

좋은 질문 주셔서 감사합니다. 다시 코드를 살펴보니 현재 페이지네이션 관련해서 두 가지 로직이 있는데요 🙂

서버(searchMovies)에서 계산하는 hasNextPage
useInfiniteQuery에서 getNextPageParam으로 계산하는 hasNextPage

현재 코드는 서버의 hasNextPage는 사용하지 않고, useInfiniteQuery의 페이지네이션만 사용하고 있습니다.

개선 방안:

서버에서 불필요한 hasNextPage 계산을 제거하거나
서버의 hasNextPage를 useInfiniteQuery의 getNextPageParam에서 활용하도록 수정

현재는 두 가지 페이지네이션 로직이 중복되어 있으니, 하나로 통일하는 것이 맞는 방향으로 보이네요. 좋은 제보 감사드립니다 :)

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. banayj0909님께서 질문해 주신 내용에 대해 답변 드리겠습니다.

useInfiniteQuery에서 제공하는 hasNextPage와 searchMovies 함수 내에서 정의하신 hasNextPage는 같은 개념을 다르게 적용한 것입니다. useInfiniteQuery의 hasNextPage는 리액트 쿼리에서 다음 페이지 데이터가 있는지를 판단하는 방법을 제공합니다. 이와 달리, searchMovies 내에서 hasNextPage를 직접 계산하여 사용하는 것은 특정 비즈니스 로직이나 커스텀 로직에 맞게 필요에 따라 사용하려는 의도일 가능성이 큽니다.

const hasNextPage = count > page * pageSize는 데이터를 서버에서 가져올 때 현재 페이지를 기준으로 남은 데이터가 있는지를 판단하는 논리를 직접 구현한 것입니다. 하지만 useInfiniteQuery를 사용하면서 추후 논리에 포함되지 않는 부분이라면, 강의에서 일관성을 위해 예제로 포함되었거나, 추후 활용을 염두에 두고 추가되었을 수 있습니다.

이와 관련하여 비슷한 논의가 진행된 게시물을 추천해 드립니다. 확인하시면 도움이 될 것입니다:
- React Query의 Infinite Scrolling에 대해 알아보자

이 링크에서는 리액트 쿼리의 useInfiniteQuery를 어떤 방식으로 활용하는지에 대한 이해를 도울 수 있습니다.

저는 질문자님의 이해를 돕고자 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

searchMovies에서 hasNextPage가 필요한 이유