react - 무한스크롤

react 사용 시 , 무한스크롤을 구현할 때 아래와 같은 방법으로 구현이 가능하다.

  const [PAGE, setPAGE] = useState<string | number>(1);
  const [scrollCheck, setScrollCheck] = useState<boolean>(true);
  const observer = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    //-----------------무한 스크롤------------------//
    if (observer.current) {
      const io = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && scrollCheck) {
          setPAGE((prevPage) => +prevPage + 1);
        }
      });
      io.observe(observer.current);
      return () => {
        io.disconnect();
      };
    }
  }, []);

  useEffect(() => {
    if (scrollCheck) {
      axios.get(`url`).then((res) => {
        if (res.data.code === 200) {
          setData((prev) => [...prev, ...res.data.data[0].LIST]);
          setScrollCheck(res.data.data[0].LIST.length === 10);
        }
      });
    }
  }, [PAGE]);

  return <div ref={observer} />;