3월 17일 TIL

임덤덤·2023년 3월 16일
0

무한스크롤 재구현

  • 오늘은 무한스크롤을 다시 구현해봤다
    • 이전에도 구현해본 경험이 있었음
  • 이번에도 옵저버를 통해서 구현해보았음

구현순서

  1. 옵저버가 감지되는지 확인
  2. 감지가 된다면 page값이 +1 되는지 확인
  3. 기존 데이터에 새로 불러온 데이터를 이어붙히는 함수 만들기
  4. 더이상 불러올 데이터가 없다면 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]);
profile
응애🐣 예비 개발자 입니다.

0개의 댓글