[React] IntersectionObserver를 사용한 infinite scroll 구현하기

---

라이브러리를 사용하지 않고 IntersectionObserver를 이용하여 무한 스크롤 구현해보기

기본 사용방법

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

 

 

IntersectionObserver를 이용한 무한 스크롤 구현 custom hook

// useInfiniteScroll hook
import React, { useEffect, useRef } from 'react';

export default function useInfinite(callback: () => void) {
    const target = useRef<HTMLDivElement | null>(null);

		const observer = new IntersectionObserver((entries, _observer) => {
		        if (entries[0].isIntersecting) {
		            console.log('IN!');
		            callback();
		        }
		    });

		useEffect(() => {
		        if (target.current) {
		            observer.observe(target.current);
		        }
		        return () => {
		            observer.disconnect();
		        };
		    }, [target]);

return [target, observer] as const;

}

 

target : 관찰 대상으로 해당 엘리먼트가 관찰 영역 안에 들어오면 isIntersecting이 true를 반환한다.

해당 hook에서는 해당 target을 반환하여 해당 hook을 사용하는 다른 컴포넌트에서 관찰대상을 설정할 수 있도록 작성

 

callback : hook의 인자로 callback 함수를 받아, 관찰 대상이 관찰 영역 실행할 함수를 받아 실행 시킬 수 있도록 작성

Reference

Intersection Observer API - Web API | MDN

Intersection Observer API - Web API | MDN