IntersectionObserver 무한스크롤_JS

IntersectionObserver

스크롤이 일어날 때 마다 핸들러를 동작시키는것은 자바스크립트의 메인엔진에서 실행 되어야하므로 많은 부하가 걸리는데, 이를 해결해 줄 수 있는게 IntersectionObserver 이다

• 흐름
  IntersectionObserver는 무한스크롤에만 사용되는건 아니다
  크게 관찰자(observer)와 관찰대상(entry), 옵션(조건) 그리고 콜백함수(로직)이 존재한다

1. 관찰자를 생성
2. 관찰 대상을 생성
3. 관찰자는 관찰대상을 관찰
4. 관찰대상이 조건을 만족하는 상태에 놓이게 되면 콜백함수를 실행

• ref 등록은 데이터가 끝나는 시점에 등록한다

return(
  <ul>
  list.map(item => (
    <li>item</li>
    ))
  </ul>
  <div ref={targetRef}></div>
  )

const handleIntersect = () => {
      noticePayload.page = noticePayload.page + 1
      getList()

     }

useEffect(() => {
	const options = {
            root: null,
            rootMargin: '30px',
        };

    const observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) handleIntersect();
     }, options);
  
  		//targetRef.current or targetRef
        observer.observe(targetRef.current);
},[])

특정 스크롤에 왔을때 이벤트 실행하기

//hooks
import { useEffect, useRef } from 'react'

export const useObserver = (
  navNumber: number,
  setNavNumber: React.Dispatch<React.SetStateAction<number>>,
) => {
  const options = {}
  const refElement = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const osv = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setNavNumber(navNumber) 
      } else {
        setNavNumber(0)
      }
    }, options)

    if (refElement.current) {
      osv.observe(refElement.current)
    }

    return () => osv.disconnect()
  }, [])

  return refElement
}


//component
  const [isFocused, setIsFocused] = useState(0)
  const refCurrent = useObserver(1, setIsFocused)

  useEffect(() => {
    console.log({ isFocused }) // isFocused > 0 && 이벤트 실행
  }, [isFocused])

참고블로그