무한 스크롤 구현하기

Intersection Observer 이용

내가 작성한 코드

  const postList = async (categoryData, pageNumber, sort) => {
    await axios
      .get(`${process.env.REACT_APP_API_URL}/articles/lists`, {
        params: {
          category: categoryData,
          page: pageNumber,
          sort: sort,
        },
      })
      .then((listData) => {
        let articleList = listData.data.data.articleList;
        console.log(articleList);
        if (listData.data.data.articleList.length === 0) {
          setIsLoding(false);
        } else {
          setIsLoding(true);
          articleList = articleList.map((elem) => {
            let postImageKey = elem.image;
            elem.image = `https://d2fg2pprparkkb.cloudfront.net/${postImageKey}?w=115&h=115&f=webp&q=90`;
            return elem;
          });
          dispatch({
            type: 'SHOW_MORE_POSTLIST',
            payload: listData.data.data.articleList,
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const pageEnd = useRef();
  useEffect(() => {
    if (isLoding) {
      const observer = new IntersectionObserver(
        (entries) => {
          if (entries[0].isIntersecting) {
            setPageNumber((prevPageNumber) => prevPageNumber + 1); // 페이지 넘버를 바꿔준다.
          }
        },
        { threshold: 0 }
      );
      observer.observe(pageEnd.current);
    }
  }, [isLoding]);

참고사이트

• https://heropy.blog/2019/10/27/intersection-observer/
• https://www.youtube.com/watch?v=nE4zY6PY748&t=337s