Intersection observer 을 사용한 무한스크롤 구현 연습중입니다.
옵저버부분은 다음과 같습니다.
useEffect(() => {
const ioOptions = {
root: null,
threshold: 1
}
const target = document.querySelector('#target');
const io = new IntersectionObserver(callback, ioOptions);
io.observe(target);
return () => {
io.disconnect();
}
}, [])
콜백함수 부분입니다.
const callback = (entries: any, observer: any) => {
if(entries[0].isIntersecting) {
setLoading(true);
setTimeout(() => {
setLoading(false);
LoadRecipe();
}, 500)
}
}
레시피를 불러오는 함수 LoadRecipe 내에서는 page 라는 state를 쓰고 있는데,
콘솔을 찍을때마다 항상 값이 기본값인 0입니다.
함수 외부에서 임의로 버튼을 생성하여 page의 값을 바꾸면 잘 바뀝니다.
어떤게 문제일까요?
사진 속 77번째 줄이 함수내에서 console.log(page) 한 것입니다.
혹시 설명이 부족하였다면 필요한 부분을 말씀해주시면 바로 올려드리겠습니다.
고수님들 답변 기다리겠습니다 감사합니다 !!
