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} />;