무한스크롤 재구현
- 오늘은 무한스크롤을 다시 구현해봤다
- 이번에도 옵저버를 통해서 구현해보았음
구현순서
- 옵저버가 감지되는지 확인
- 감지가 된다면 page값이 +1 되는지 확인
- 기존 데이터에 새로 불러온 데이터를 이어붙히는 함수 만들기
- 더이상 불러올 데이터가 없다면 page값이 올라가지않게 하기
옵저버함수
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
setPages(pages + 1);
}
});
if (bottomRef.current) {
observer.observe(bottomRef.current);
}
return () => {
if (bottomRef.current) observer.unobserve(bottomRef.current);
};
}, [blogData]);
- 옵저버를 만들고 만약에 옵저버가 감지했다면 Page를 1 올리고 감지가 끝나면 unobserve하는 useEffact임
기존 데이터를 이어주는 함수
const blogInitialValue: BlogArrayType = {
nextPage: true,
blogList: [],
};
const [blogData, setBlogData] = useState<BlogArrayType>(blogInitialValue);
const getblogDataResponse = async () => {
setLoading(true);
const response = await getBlogData({
pages: pages,
nickName: params.nickName,
categoryId: activeCategoryId,
});
setLoading(false);
const newData = [...blogData.blogList, ...response.blogList];
setBlogData({ blogList: newData, nextPage: response.nextPage });
};
함수가 실행되는 useEffact
useEffect(() => {
if (blogData.nextPage) {
getblogDataResponse();
}
}, [pages]);