hasMorePosts부분이 이해가 가지 않습니다.

안녕하세요, 강의를 보고 계속 생각해봐도 이해가 가지 않는 부분이 있습니다.

draft.hasMorePosts = draft.mainPosts.length < 50;

위 코드는 redux폴더의 post.js파일에서 LOAD_POSTS_SUCCESS 부분입니다.

메인포스트가 50개 이하면 true, 이상이면 false를 해준다고 하셨는데

mainposts는 사람들이 포스트를 계속 쓰다보면,

mainposts에 저장이 되어, 언젠가 mainposts의 길이는 50개가 넘어갈텐데,

hasMorePosts는 그럼 언제나 false가 되는것 아닌가요? (한번 포스팅하면,

본인이 삭제하기 전까진 mainposts에 들어있기 때문에, 삭제 안하면 mainPosts의 길이가 줄지 않아서)

그렇다면 처음 화면 열었을 때,

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

위에 코드를 적어놨기 때문에 처음에는 저 코드대로 로딩이 되고,

그 이후에는 계속 hasMorePosts는 false이기 때문에 아래코드는

( if (hasMorePosts && !loadPostsLoading) ) < 이부분 if문에 걸려서 영원히 로딩을 할 수 없지 않나요?

useEffect(() => {
    function onScroll() {
      if (
        window.scroll + document.documentElement.clientHeight >
        document.documentElement.scrollHeight - 300
      ) {
        if (hasMorePosts && !loadPostsLoading) {
          // mainPosts의 길이가 50개 이하면서, 로딩중이 아닐때만 데이터 불러오기
          dispatch({ type: LOAD_POSTS_REQUEST });
        }
      }
    }
    window.addEventListener("scroll", onScroll);

    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, [hasMorePosts]);

너무 이해가 가지 않습니다ㅠㅠ

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