⛵ 항해99/TIL · WIL ✏️
[TIL] 2023.11.09 - 무한 스크롤 구현(react-intersection-observer)
hhhhy
2023. 11. 9. 23:53
react-intersection-observer 이용한 무한 스크롤 구현
import { useInView } from "react-intersection-observer";
// 무한스크롤
// ref : 관찰할 객체
// inView : ref가 화면에 보이면 true로 변경됨
const [ref, inView] = useInView();
const [page, setPage] = useState(0); // 페이지 수 관리
const [likeList, setLikeList] = useState([]); // get으로 가져온 사용자별 좋아요 게시글 데이터(getLikeList)
// GET : 사용자별 좋아요 게시글 가져오기
const getLikeList = async () => {
try {
const response = await getLikeListAPI(page, {
params: {
page: `${page}`, // 현재 페이지 번호
size: 5, // 원하는 페이지 크기(게시물 수)
},
});
setLikeList((likeList) => [...likeList, ...response.data.content]); // 기존 데이터에 새 데이터 추가
setPage((page) => page + 1); // 페이지 번호 +1 시킴
} catch (error) {
// console.log(error.response.data.msg);
}
};
// inView 상태가 true일 때(= 관찰한 게시물 ref가 화면에 보일 때 = 마지막)
// 좋아요한 게시물 목록을 추가로 가져오기
useEffect(() => {
if (inView) {
getLikeList();
}
}, [inView]);
// 관찰할 객체에 ref 추가하기!
.....
<div className="mt-[73px] mb-44">
{likeList.length > 0 ? (
likeList.map((item) => (
<div
ref={ref}
key={item.postId}
onClick={() => onCilckLikePostHandler(item.postId)}
className="mx-4 cursor-pointer"
>
.....