Infinite Scroll 구현하기

React Hook react-intersection-observer

Scroll event, IntersectionObserver와 같이 여러 방법이 있지만,
React Hook react-intersection-observer로 Infinite Scroll을 구현하는 방법을 소개하겠습니다. 이는 IntersectionObserver를 간단하게 사용할 수 있게 도와줍니다.

먼저, Infinite Scroll을 구현하긴 위해서 서버로부터 정해진 양만큼의 데이터를 받아와야 합니다.

예를들어, 처음 받은 데이터가 5개이고, 스크롤을 내렸을 때 5개의 데이터를 추가로 받아오는 방식입니다.

5
5+5
10+5

---

IntersectionObserver

사용 방법을 알아보기 전에 먼저 IntersectionObserver이 무엇인지 간단하게 설명하자면,
대상이 화면에 보이면 callback 함수를 실행하여 원하는 동작을 수행할 수 있도록 타겟을 감시하는 역할을 합니다.

IntersectionObserver

Install

npm install react-intersection-observer

Usage

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


const App = () => {
  const { ref, inView } = useInView(options);
  // ref가 화면에 나타나면 inView는 true, 아니면 false를 반환한다.

  return (
    <div>
      <ul>
        <li />
        <li />
        <li />
      </ul>
      <div ref={ref}></div> // 확인할 부분에 ref 할당
    </div>
  )
}

화면에 보이는지 확인할 타겟은 스크롤의 가장 마지막에 넣고, 이부분이 보이면 InView는 true가 됩니다. 그럼 InView의 상태를 확인해서 true일 경우 다음 데이터를 받아오면 되겠죠?

  useEffect(() => {
    if (inView && !loading) {
      // 예시
      page+1
      fetchMore({page});
    }
  }, [inView, loading]);

Options

• root : 대상에 대한 경계를 지정합니다. 지정하지 않는다면 뷰포트를 경계로 지정합니다.
• rootMargin : root에 대한 margin을 설정합니다. 이는 CSS의 margin과 비슷합니다.
• threshold : 0.0~1.0까지 값을 지정할 수 있으며, 루트와 대상의 교차 영역을 비율로 지정합니다.
  예를들어 0.0은 단 하나의 픽셀이라도 보여지면, 1.0은 전체 대상이 보이게 됨을 의미합니다.

이외에도 여러 옵션이 있지만, 자세한 내용은 react-intersection-observer에서 확인하시는게 더 좋습니다.