Intersection Observer API

원티드 프리온보딩 과제 진행 중 인피니티 스크롤을 라이브러리 없이 구현하여야 했다. 고민끝에 intersection observer API를 사용하여야 했고 하루만에 완성을 해야 했던지라 완벽한 기능 구현은 못했다. 그래서 블로그에 한번 더 정리를 한다.

무한 스크롤을 구현하는 방법엔 여러 방법이 있지만 스크롤 이벤트와 인피니티 스크롤 라이브러리는 해당 과제에 적합하지 않았다. Intersection Observer API는 기본적으로 브라우저 Viewport와 Target으로 설정한 요소의 교차점을 관찰하여 그 Target이 Viewport에 포함되는지 구별하는 기능을 제공한다.

Intersection Observer API를 사용하는 부분을 custom hook으로 분리하기전 옵션값인 Intersection Observerinit 인터페이스를 먼저 확인한다.

// [코드 10] IntersectionObserver 옵션 인터페이스
interface IntersectionObserverInit {
   root?: Element | Document | null;
   rootMargin?: string;
   threshold?: number | number[];
}

// [코드 11] IntersectionObserver custom hook
type IntersectHandler = (
 entry: IntersectionObserverEntry,
 observer: IntersectionObserver
) => void
 
const useIntersect = (
 onIntersect: IntersectHandler,
 options?: IntersectionObserverInit
) => {
 const ref = useRef<HTMLDivElement>(null)
 const callback = useCallback(
   (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) onIntersect(entry, observer)
     })
   },
   [onIntersect]
 )
 
 useEffect(() => {
   if (!ref.current) return
   const observer = new IntersectionObserver(callback, options)
   observer.observe(ref.current)
   return () => observer.disconnect()
 }, [ref, options, callback])
 
 return ref
}

먼저 target 위치를 잡을 ref를 선언. 그후 root와 target이 교차 상태인지 확인하는 isintersecting 값이 true이면 콜백을 실행하는 함수를 useCallback으로 선언한다. useEffect 콜백에서 Intersection Observer 객체를 생성하고 observe 호출을 통해 target 요소의 관찰을 시작한다. 컴포넌트가 언마운트될 때는 clean up을 통해 disconnect를 호출하여 모든 요소의 관찰을 중지하도록 한다.

여기까지가 intersection observer API에 관한 예시코드이고 내가 참고한 카카오 기술 블로그 에선 react-query와 같이 사용하여 구현을 하였다.

이번 과제는 UI관련 라이브러리 이외엔 사용이 불가 하였고 남은 프리온보딩 과제중 무한스크롤 관련 과제가 나온다면 react-query와 같이 사용해보려고 한다.