intersection observer 를 이용해 infinite scroll 구현하기

https://velog.io/@suyeonme/react-Infinite-Scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[react] Infinite Scroll 구현하기

 

intersection observer 개념

infiniter 구현하는 법 등 정리하기

 

 

범구님 예시

import 'intersection-observer';

import { RefObject, useCallback, useEffect, useRef } from 'react';

export function useIntersectionObserver<T extends HTMLElement>(
    effect: IntersectionObserverCallback,
    targetRef: RefObject<T | null>,
): void {
    const observerRef = useRef<IntersectionObserver | null>(null);

    const getObserver = useCallback(() => {
        if (!observerRef.current) {
            observerRef.current = new IntersectionObserver(effect);
        }
        return observerRef.current;
    }, [effect]);

    useEffect(() => {
        const observer = getObserver();
        const target = targetRef.current;
        if (target) {
            observer.observe(target);
        }
        return () => {
            if (target) {
                observer.unobserve(target);
            }
        };
    }, [targetRef, getObserver]);
}