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

  useEffect(() => {
    const onScroll = () => {
      /*
       * window.scrollY, // 스크롤된 양
       * document.documentElement.clientHeight, // 유저가 보는 문서의 높이
       * document.documentElement.scrollHeight // 전체 문서 높이
       */
      if (
        hasMorePost &&
        window.scrollY +
          document.documentElement.clientHeight +
          300 >
          document.documentElement.scrollHeight
      ) {
        console.log('✅ 인피니티 스크롤');
        dispatch(loadPostAction(5));
      }
    };
    window.addEventListener('scroll', onScroll);
    // 컴포넌트 언마운트시 이벤트 제거
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [hasMorePost]);

useEffect 디벤던시에 [hasMorePost] 를 사용한 이유는 무엇인가요?

hasMorePost 의 상태가 변화(로딩요청 -> 로딩완료)하면 계속적으로 useEffect 가 실행되어 성능에 더욱 안좋을 것 같습니다.