무한스크롤에 대해 알아보기

무한스크롤을 구현하는 여러 방법에 대해 알아보자.
풀스택 클론코딩을 모두 마무리한 후에 하나씩 시도해보고 정리해볼 계획이다.

scroll을 이용한 방법

리액트에서 작성한 코드를 가져왔다.

window.scrollY는 스크롤바에서 현재 스크롤의 위치를 나타낸다
document.documentElement.clientHeight는 현재 화면의 높이를 픽셀로 나타낸다.
document.documentElement.scrollHeight은 총 스크롤의 길이를 나타낸다

즉 스크롤을 최하단으로 내렸을 때 아래의 식이 성립한다.

window.scrollY + document.documentElement.clientHeight ===
  document.documentElement.scrollHeight;
//true

게시글로 따로 작성하기 애매한 디테일은 next에서 제공하는 throttle 함수는 이미 보내진 요청을 취소할 수는 없어 loading이 true일 때는 아예 요청을 안 보내도록 처리해주었다.

useEffect(() => {
  function onScroll() {
    if (
      window.scrollY + document.documentElement.clientHeight >
      document.documentElement.scrollHeight - 300
    ) {
      if (hasMorePost && !loadPostLoading) {
        dispatch({
          type: LOAD_POST_REQUEST,
        });
      }
    }
  }
  window.addEventListener("scroll", onScroll);

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

Intersection Observer API

작성중..!

react virtualized

작성중..!