[TIL] 2023.11.09 - 무한 스크롤 구현(react-intersection-observer)

 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"
        >
            
.....

 

 참고 

https://velog.io/@jsi06138/React-Intersection-Observer-API%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0