인프런 커뮤니티 질문&답변

NOAH

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

인피니트 스크롤링 적용하기

load request가 두 번씩 가는 현상

작성

211

밑에 분들처럼 저도 코드에 이상은 없는거 같은데 request가 두번씩 가는 현상이 나오네요. 현영님처럼 한 번만 가야 정상일듯 한데 ... 천천히 내리면 한 번만 나오긴하는데 빠르게 스크롤을 내리거나 많이 움직이면 두 번씩 가네요.

혹시 시간 있으시면 확인좀 부탁드릴게요. 혹시 useEffect가 두 번 정의 되어있어서 그런지... 잘 모르겠네요

twitter-clone/index.js at main · MinwooJJ/twitter-clone (github.com)

function Home() {
  const { me } = useSelector((state) => state.user);
  const { mainPosts, hasMorePost, loadPostsLoading } = useSelector(
    (state) => state.post
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(loadPostsRequest());
  }, []);

  useEffect(() => {
    function onScroll() {
      console.log(
        window.scrollY,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight
      );
      if (
        window.scrollY + document.documentElement.clientHeight >
        document.documentElement.scrollHeight - 300
      ) {
        if (hasMorePost && !loadPostsLoading) {
          dispatch(loadPostsRequest());
        }
      }
    }
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [hasMorePost, loadPostsLoading]);

  return (
    <AppLayout>
      {me && <PostForm />}
      {mainPosts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </AppLayout>
  );
}