useInfiniteQuery ➕ useInView로 무한 스크롤 구현하기

최종 UI

병원 페이지의 리뷰 무한 스크롤

 

이벤트 동작 정의하기

리뷰 데이터는 한 페이지에 20개씩 표시되며, 사용자가 화면의 마지막 데이터에 도달하면 자동으로 다음 데이터를 불러와 이어서 표시되도록 구현했습니다.

 

 

이벤트 동작 구현하기 

📗 참고자료

useInfiniteQuery로 무한스크롤 구현하기 | 올리브영 테크블로그

 

useInfiniteQuery | TanStack Query React Docs

 

[React] TanStack-Query의 useInfiniteQuery 훅을 이용하여 무한스크롤 구현하기

 

React Query 적용을 위한 기본 설정

useInfiniteQuery와 같은 Query 기반 훅을 사용하기 위해서는 QueryClient 생성과 Provider 적용이 필요합니다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient(); //모든 쿼리와 캐시를 관리하는 중앙 저장소 역할을 합니다.

 

쿼리 캐시, 전역 설정, 쿼리 무효화 등 다양한 기능을 해당 객체를 통해 관리할 수 있습니다.

 

• React Query를 사용하려면 앱 전체에 QueryClient를 공급해야 합니다.
• Provider 안에서만 useQuery, useInfiniteQuery 같은 훅을 사용할 수 있습니다.

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <StrictMode>
      <App />
    </StrictMode>,
  </QueryClientProvider>
)

 

 

 

useInfiniteQuery를 통한 무한 스크롤 구현 

useInfitieQuery사용을 위해서는 아래의 라이브러리를 설치해주어야 합니다. 

npm install  @tanstack/react-query

 

useInfitieQuery에 할당한 객체 내의 옵션은 아래와 같습니다. 

import { useInfiniteQuery } from "@tanstack/react-query";

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
  status,
  error,
} = useInfiniteQuery({
  queryKey: ["reviews", clinicParam.id], //reviews와 id값으로 쿼리의 고유 식별키 설정
  queryFn: ({ pageParam }) => fetchReview(pageParam, clinicParam), //데이터를 가져오는 함수
  initialPageParam: 0, //초기 pageParam 설정
  getNextPageParam: (lastPage) => {
    const nextPage = lastPage.data.page.number + 1;
    return nextPage <= lastPage.data.page.totalPages ? nextPage : undefined;
  },
});

 

queryKey

특정 데이터를 가져오는 쿼리 자체의 고유한 식별키입니다. 

queryKey: ["reviews", clinicParam.id] // ['reviews', 1] 형태로 캐시에 저장됩니다.

 

[역할]

 캐싱

• 데이터를 가져오면 queryKey 를 기준으로 데이터를 캐시에 저장합니다. 
• 동일한 queryKey 요청 시, 새로운 요청 없이 캐시 데이터를 반환합니다. 

데이터 무효화 및 업데이트

• 데이터가 변경될 경우 queryKey를 활용해 어떤 캐시를 무효화하고 다시 가져올지 결정합니다. 

쿼리 인스턴스 식별

• 여러 컴포넌트에서 같은 queryKey 사용 시, 하나의 쿼리 인스턴스로 인식되어 상태가 자동으로 동기화 됩니다.

queryFn

queryFn은 데이터를 가져오는 함수를 지정합니다

queryFn: ({ pageParam }) => fetchReview(pageParam, clinicParam)
initialPageParam: 0 //초기 pageParam을 설정합니다.

• queryFn에서는 pageParam을 매개변수로 전달합니다.
• 초기값을 설정하지 않으면 기본적으로 undefined가 됩니다. 

fetchReview함수

export function fetchReview(page, clinicParam) {
    const token = localStorage.getItem("accessToken").trim();

    return api.get(
        `/clinics/${clinicParam.id}/reviews`,
        {
            params: {
                "page": page
            },
            headers: {
                "Authorization": `Bearer ${token}`
            },
        }
    )
}

 

getNextPageParam

다음 페이지를 요청할 때 사용할 pageParam 값을 결정하는 함수입니다.

 

lastPage: 가장 마지막 요청을 통해 받아온 data입니다.   

getNextPageParam: (lastPage) => {
  ... 생략
}

 

구현한 코드에서 리뷰 요청 시, 응답 데이터는 다음과 같습니다.

 

"data": {
  "content": [
    {}
  ],
  "page": {
    "size": 20,
    "number": 0, //현재 페이지
    "totalElements": 70,
    "totalPages": 4 //총 페이지
  }
}

 

nextPage는 현재 페이지 번호 + 1로 계산합니다.

만약, 마지막 페이지라면 undefined를 반환하여 추가 요청이 발생하지 않습니다. 

getNextPageParam: (lastPage) => {
  const nextPage = lastPage.data.page.number + 1
  return nextPage <= lastPage.data.page.totalPages ? nextPage : undefined
}

위의 옵션을 통해 요청이 완료되면 최종적으로 아래와 같은 데이터들을 응답합니다. 

const {
  data,               // 쿼리 응답 데이터
  fetchNextPage,      // 다음 페이지 데이터를 가져오는 함수
  hasNextPage,        // 다음 페이지 존재 여부
  isFetchingNextPage, // 다음 페이지 로딩 상태
  status,             // 쿼리 상태
  error,              // 에러 정보
} = useInfiniteQuery({
  ...생략
});

 

useInView를 활용한 화면 감지 기반 무한 스크롤

useInView 사용을 위해서는 아래의 라이브러리를 설치해야 합니다.

npm i react-intersection-observer 

 

 

useInView를 이용하면 특정 DOM이 화면에 들어왔는지 감지할 수 있습니다.

 

ref

화면에서 감지를 하고 싶은 요소나 위치에 직접 연결하는 속성입니다.

 

inView

연결된 요소가 화면 안에 들어와 있는지를 판단하여 true 또는 false으로 값을 가지는 속성입니다.

 

 

import { useInView } from "react-intersection-observer";

const { ref, inView } = useInView();

  useEffect(() => {
    if (inView && hasNextPage && !isFetchingNextPage) {
      console.log("Fetching next page...")
      fetchNextPage() //모든 조건이 만족한다면 다음 페이지의 데이터를 요청합니다. 
    }
  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage])

 

 

 

이전에 받아온 data를 활용하여 ReviewForm 컴포넌트로 출력하고, 무한 스크롤 감지를 위한 ref를 마지막에 추가합니다.

 

const renderContent = () => {
    switch (activeSection) {
      ...생략
      case "리뷰":
        return (
          <div className="p-6 bg-gray-50 rounded-lg">
            {data?.pages[0]?.data?.page?.totalElements === 0 ? (
              <>
                <h3 className="text-xl font-semibold mb-4">환자 리뷰</h3>
                <p className="font-bold">리뷰가 존재하지 않습니다. </p>
              </>
            ) : (
              <>
                <div className="flex flex-row">
                  <h3 className="text-xl font-semibold mb-4">환자 리뷰: {data?.pages[0]?.data?.page?.totalElements}</h3>
                  <button 
                    className="text-white ml-auto bg-black px-4 rounded"
                    onClick={() => navigate("/review", {state: {clinicId: clinicParam.id}})}
                  > 리뷰 작성하기</button>
                </div>
                <div className="space-y-4">
                  {data?.pages
                    ?.flatMap((page) => page.data.content)
                    .map((review, index) => (
                      <ReviewForm
                        key={`${review.id || index}`}
                        author={review.author}
                        content={review.content}
                        imageURLs={review.imageURLs}
                        createdAt={review.createdAt}
                        rating={review.starPoint}
                      />
                    ))}
                    {/* 화면 감지 위치 (무한 스크롤용) */}
                  {<div ref={ref} />} 
                </div>
              </>
            )}
          </div>
        )
     ...생략
    }

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import './App.css'
import App from './App.jsx'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; //추가

const queryClient = new QueryClient()//추가

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}> //추가
    <StrictMode>
      <App />
    </StrictMode>,
  </QueryClientProvider>
)

 

---

이번 프로젝트에서는 useInfiniteQuery와 useInView를 활용하여 사용자가 스크롤할 때 자동으로 데이터를 불러오는 무한 스크롤을 구현하였습니다. 

이 방식을 활용하면 버튼 클릭 없이도 자연스럽게 리뷰 데이터를 이어서 보여줄 수 있으며 쿼리 캐시 관리와 데이터 무효화도 간편하게 처리할 수 있습니다.