[Next.js] Infinity Scroll

무한 스크롤은 프론트엔드 개발자가 만나게 되는 몇가지 귀찮은 작업일 것이다. 

그리고 나는 이번에 만나게 되었다. 

 

환경은 Next.js & React-Query이다. 

그렇다 React-Query를 사용하고 있다. 이 전부터 React-Query는 무한 스크롤을 쉽게 구현할 수 있게 제공해주는 것이 

있는 걸로 알고있다. 

 

그래서 이번에 해당 기능을 사용하려고 한다. 

 

useInfiniteQuery 

무한 스크롤을 구현할 수 있게 도와주는 아주 강력한 Hook이다. 

const {
      data, 
      fetchNextPage, 
      hasNextPage,
      status,
  } = useInfiniteQuery(
        "list" 
      , getList 
      , {
          getNextPageParam: ({pagination:{ paginationCount }}, pageParam) => 
              /* 조건 */
        }
      )

기본적으로 제공하는 useQuery의 내용은 설명하지 않겠다. 

▶ fetchNextPage : 다음 페이지를 불러오는 함수이다. 해당 함수를 통해서 스크롤을 제일 아래로 내렸을 때 

                                호출해서 다음 페이지의 데이터를 받아온다. 

▶ hasNextPage : 다음 페이지가 있는지 확인한다. Boolean 값이다. 

 

getNextPageParam

무한 스크롤을 만드는데 가장 중요한 기능이다.

조건을 통해서 Number 또는 falsy 한 값을 return 해야 한다. 

 

Number 값을 리턴한다면 해당 값을 pagePram에 넣어준다. 

만약 falsy한 값을 리턴하는 경우 더이상 추가 fetch를 실행하지 않는다. 

 

즉 getNextPageParam을 통해서 다음 페이지의 데이터를 가져올지, 멈출지를 정할 수 있다. 

 

좀 더 디테일하게 나타내봤다. 

maxPage에 해당하는 데이터는 백엔드에서 넘겨줘야한다.

그리고 데이터가 합쳐져서 오는 것이 아닌 각각의 배열로 넘겨진다는 점을 사용해서

maxPage와 현재 배열(페이지 데이터 as pageParam )의 갯수를 비교해서 마지막 페이지를 확인한다. 

 

  const getList = ({ pageParam = 1 }) =>     
      axios
      .get("~~~", {
          params: {
              page: pageParam,
          },
      })
      .then(res => res?.data)

getNextPageParam을 통해서 기본적으로 pageParam에 리턴한 값이 넘겨지지만, 1페이지의 경우에는 

undefined가 넘겨지기 때문에 초기화가 필요하다. 

 

이렇게 페이지별로 데이터를 가져오는 것은 구현했는데, 

스크롤이 마지막에 왔는지 확인하는 부분은 useInfiniteQuery 가 해결해주지 못한다. 

 

이것은 intersectionObserver를 사용해서 구현할 것이다. 

 

intersectionObserver

유저가 스크롤을 제일 아래로 내렸을 때를 감지하는 것은 매우 귀찮다. 

하지만 intersectionObserver라는 web API를 사용하면 간단하게 구현이 가능하다. 

 

하지만 IE에서는 지원하지 않는 방법이다. 

 

IntersectionObserver는 타겟 요소와 해당 타겟 요소의 상위 요소 사이의 변화를 비동기적으로 관찰해준다. 

이것을 통해서 부모 요소와 타겟이 어느정도 교차하는 경우  상호작용을 자동으로 발생시킨다. 

 

이것을 통해서 제일 아래 요소가 화면에 나올 경우 다음 페이지를 호출하는 함수를 실행시킬 계획이다. 

 

  import { useEffect } from "react"

  export const useObserver = ({
      target, 
      onIntersect, 
      root = null, 
      rootMargin = "0px", 
      threshold = 1.0,
  }) => {
      useEffect(() => {
          let observer

          if (target && target.current) {
              observer = new IntersectionObserver(onIntersect, { root, rootMargin, threshold })
              observer.observe(target.current)
          }

          return () => observer && observer.disconnect()
      }, [target, rootMargin, threshold])
  }

IntersectionObserver을 쉽게 활용하기 위해서 커스텀 훅을 만들었다. 

target은 관찰을 목표로 하는 요소이고, onIntersect는 교차한 경우 실행시킬 함수이다. 

 

그리고 root의 경우 target의 부모 요소인데 null인 경우 document가 기본적으로 설정된다. 

rootMargin은 root과 target의 여백 거리를 나타내고 

threshold는 임계점으로 1.0이면 root에서 target이 100% 보여질 때 onIntersect를 실행하겠다는 뜻이다. 

 

이것을 봤을 때 어떤 방법으로 무한 스크롤을 구현할 지 감이 올 것이다. 

스크롤 아래에 div를 한 개 만들어서 그 녀석의 ref를 target으로 넘겨준다. 

 

그러면 스크롤을 제일 아래로 내리면 해당 div가 root에 100% 보여지기 때문에 fetchNextPage 함수가

호출되므로 새로운 페이지 데이터가 들어온다. 

 

새로운 데이터로 인해 기존 div는 다시 스크롤 제일 아래로 내려가기 때문에 또 스크롤을 제일 아래로 내린다면 

fetchNextPage 함수를 호출하게 되므로 무한 스크롤을 구현하게 된다. 

 

  import { useRef } from "react"
  import { useInfiniteQuery } from "react-query"
  import axios from "axios"
  import { useObserver } from "../lib/hooks/useObserver"
  import style from "../styles/index.module.scss"

  const OFFSET = 30

  const getPokemonList = ({ pageParam = OFFSET }) =>
      axios
          .get("https://pokeapi.co/api/v2/pokemon", {
              params: {
                  limit: OFFSET,
                  offset: pageParam,
              },
          })
          .then(res => res?.data)
                 
  const Index = () => {
      // 바닥 ref를 위한 useRef 선언      
      const bottom = useRef(null)

      const {
          data,
          error,
          fetchNextPage,
          hasNextPage,
          isFetching,
          isFetchingNextPage,
          status,
      } = useInfiniteQuery("pokemonList", getPokemonList, {
          getNextPageParam: lastPage => {
              const { next } = lastPage
               
              if (!next) return false
             
              return Number(new URL(next).searchParams.get("offset"))
          },
      })

      // useObserver로 넘겨줄 callback, entry로 넘어오는 HTMLElement가
      // isIntersecting이라면 무한 스크롤을 위한 fetchNextPage가 실행될 것이다.
      const onIntersect = ([entry]) => entry.isIntersecting && fetchNextPage()

      // useObserver로 bottom ref와 onIntersect를 넘겨 주자.
      useObserver({
          target: bottom,
          onIntersect,
      })

      return (
          <div className={style.pokemons_wrap}>
              {status === "loading" && <p>불러오는 중</p>}

              {status === "error" && <p>{error.message}</p>}

              {status === "success" && (
                  <div className={style.pokemon_list_box}>
                      {data.pages.map((group, index) => (
                          <div className={style.pokemon_list} key={index}>
                              {group.results.map(pokemon => 
                                  <p key={pokemon.name}>{pokemon.name}</p>
                              )}
                          </div>
                      ))}
                  </div>
              )}

              // 아까 만들었던 더 불러오기 버튼을 제거하고 
              // 바닥 ref를 위한 div를 하나 만들어준다.
              <div ref={bottom} />

              {isFetchingNextPage && <p>계속 불러오는 중</p>}
          </div>
      )
  }

  export default Index

 

참고 

https://velog.io/@hdpark/React-Query%EC%99%80-%ED%95%A8%EA%BB%98%ED%95%98%EB%8A%94-Next.js-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4#%F0%9F%97%A8-intersectionobserver

React Query와 함께하는 Next.js 무한 스크롤