React로 무한 스크롤 구현

const { useState, useEffect, useRef } = React;

  function InfiniteList() {
    const [items, setItems] = useState(Array.from({length:5}, (_,i) => `UNIT-${i+1}` ));
    const [loading, setLoading] = useState(false);
    const loaderRef = useRef(null);

    useEffect(() => {
      const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting && !loading) {
          setLoading(true);
          setTimeout(() => {
            setItems(prev => [...prev, ...Array.from({length:3}, (_,i) => `UNIT-${prev.length+i+1}`)]);
            setLoading(false);
          }, 800);
        }
      });
      if (loaderRef.current) observer.observe(loaderRef.current);
      return () => observer.disconnect();
    }, [loading]);

    return (
      <div style={{height:'200px', overflowY:'auto', border:'1px solid #1a1a1a', padding:'8px'}}>
        {items.map(item => <div key={item} style={{color:'#888', padding:'6px 0', borderBottom:'1px solid #1a1a1a', fontSize:'12px'}}>▶ {item}</div>)}
        <div ref={loaderRef} style={{color:'#333', textAlign:'center', padding:'8px', fontSize:'11px'}}>{loading ? 'LOADING...' : 'SCROLL DOWN'}</div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<InfiniteList />);