React IntersectionObserver 샘플

출처 : Wikimedia Commons

Infinite Scrolling 을 구현할 일이 있어 intersection observer 을 들여다 보고 있다. 웹에 여기저기 샘플 소스들이 있는데 이것저것 참고해서 구현해보다 이것저것을 짬뽕한 내 버전의 샘플 소스를 올려본다.

import React, { useState, useRef, useEffect } from 'react';
function App()
{
const [data, setData] = useState([{id:0},{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9},{id:10},{id:11},{id:12},{id:13},{id:14},{id:15},{id:16},{id:17},{id:18},{id:19},{id:20},{id:21},{id:22},{id:23},{id:24},{id:25},{id:26},{id:27},{id:28},{id:29},{id:30},{id:31},{id:32},{id:33},{id:34},{id:35},{id:36},{id:37},{id:38},{id:39},{id:40},{id:41},{id:42},{id:43},{id:44},{id:45},{id:46},{id:47},{id:48},{id:49},{id:50}]);
const target = useRef(null);
const loadItem = () =>
{
  //target 이 만났을 때 구현할 로직 삽입
  console.log('loadItem');
}
useEffect(()=> {
  const options = {
  root: null,
  threshold: 0,
};
const handleIntersection = (entries, observer) => {
  entries.forEach((entry) => {
    //주석 부분과 같이 호출하면 target 이 교차되었을떄 loadItem 을 무한호출함
    /*if( !entry.isIntersecting) { return; }
    loadItem();
    observer.unobserve(entry.target);
    observer.observe(target.current);*/
    if( !entry.isIntersecting) {
      return;
    } else {
      loadItem();
    }
  });
};
  const io = new IntersectionObserver(handleIntersection, options);
  if(target.current) {
    io.observe(target.current);
  }
  return () => io && io.disconnect();
},[target]);
return (
<div>
  <div>
    {data.map((animal, index)=> {
      const last = index === data.length -1;
      return (
        <div key={index} style={{border:'1px solid red'}}>ID : {animal.id}</div>
      )
     })}
  <div ref={target} style={{border:'1px solid blue'}}>bbb</div>
</div>
</div>
);
}
export default App;