[React] infinite scroll(무한 스크롤) 구현 - Intersection Observer

 

안녕하세요 이번 포스팅에는 Intersection Observer에 대한 설명과 Intersection Observer를 활용한 무한스크롤 구현 방법에 대해 알아보겠습니다.

지난 글에서 scroll handler를 활용해서 무한스크롤을 구현 했었는데 그 코드를 기반으로 scroll handler 부분을 intersection Observer로 바꿔보도록 하겠습니다.

 

1. Intersection Observer란?

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 
viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.
- MDN

위의 설명은 MDN에 나와있는 Intersection Observer에 대한 설명입니다. 좀 더 이해하기 쉽게 무한스크롤 구현에 대입하여 설명 해 보자면  target요소는 스크롤 내부의 가장 하단 부분이 되고 상위요소 또는 최상위 document는 사용자가 보는 화면이 되겠습니다. 즉 스크롤 내부 리스트의 마지막 요소가 화면에 보이냐 안보이냐를 관찰하는 것입니다. target요소가 보이게 된다면 callback 함수를 통해 원하는 작업을 수행할 수 있습니다.

 

2. 시작 코드

2023.05.31 - [React] - [React] infinite scroll(무한 스크롤) 구현 - scroll event

[React] infinite scroll(무한 스크롤) 구현 - scroll event

위 글의 최종 코드를 기반으로 scroll event 부분을 Intersection Observer로 바꿔 보도록 하겠습니다.

 

 

3. target element 생성

먼저 리스트 하단에 scroll이 다 내려갔는지 확인 할 element를 만들어 주고 useRef를 통해 element를 가져오도록 하겠습니다.

        import React, { useEffect, useState, useRef } from 'react' //useRef import
        ...
        
          const target = useRef(null); // 변수 추가
          
        ...
        
        {
          input == 0 ? (null) : (

            list.map((item, index) => (
              <div className={styles.item} key={index}
                onClick={() => {
                  console.log(`${index}번 클릭입니다 created by ${input}`)
                }}
              >
                <p>{item}</p>
              </div>
            ))
          )
        }      
        <div ref={target}> </div>  // target element 추가

 

 

4.  Observer에 등록한 callback 함수 만들기

target element가 화면에 나타나게 되면 실행 해 줄 callback 함수와 ontions 요소를 만들어 줍니다. 저희는 무한스크롤을 만들 생각이니 리스트를 더 생성해주는 작업을 여기서 수행 해 줍니다.

 

  const options = { threshold: 1, rootMargin: '80px' };
  
  const scrollCallback = () => {
    console.log("데이터 추가");
    setShowMore(true)
  };

 

 

5. observer 생성

이전 코드에서 scroll event listener를 등록해 주었던 useEffect 내부 코드를 전부 삭제하고 target을 감지 할 Observer 생성 코드로 교체 해 줍시다.

  useEffect(() => {
      const observer = new IntersectionObserver(scrollCallback, options);
      observer.observe(target.current);

      return () =>{
        observer.unobserve(target.current)
      }
  }, []);

 

 

6. 실행화면

 

 

7. 마무리

Intersection Observer는 scroll 보다 훨씬 코드가 간결해지고 스크롤이벤트가 가지고 있는 단점인 scroll event의 무분별한 발생이 일어나지 않는다는 장점이 있습니다. 그리고 무한스크롤 뿐만 아니라 사용자의 다양한 조작에 반응하는 interaction을 개발 할 수 있게 도와줄 것 입니다.