무한스크롤 intersection-observer 없이 구현해보기

🚨  TroubleShotting

문제 발생의 배경 - As Is

무한스크롤 사용 이유
1. 데이터를 추가적으로 불러올 때 매끄러운 UI
2. 새로운 데이터를 불러올 때 이전 데이터를 refetch 하지 않고 새로운 데이터만 fetch해서 불필요한 네트워크 요청량을 줄일 수 있기 때문에

이러한 이유로 useInfiniteQuery를 이용해서 무한스크롤을 구현하기로 했다.

그런데, intersection-observer 없이 무한스크롤을 구현해보고 싶었다.
굳이? 싶기도 하지만 코딩의 스팩은 시행착오의 결과물이라고 했으니..! 함 해보자

방법은 두 가지가 있을 것 같다.

1. 스크롤 내린 높이가 전체 높이를 기준으로 전체 높이의 어느정도를 넘기면 fetchNextPage() 

2. 스크롤 내린 높이가 intersection-observer의 useInview처럼 특정 ref 요소를 기준으로 몇 퍼센트를 넘기면 fetchNextPage()

---

How(과정) ?

시행착오 1

처음에는 내가 스크롤한 높이 vs 전체 document의 높이와 비교해서 
예를 들면, 스크롤한 높이가 전체 document의 x 0.8 보다 크면 fetchNextPage()를 하도록 하려했다.

그래서 우선 내가 스크롤한 높이와 전체 document의 높이를 구해보았다.

const QuizCommentsList = () => {
  const {
    data: quizComments,
    isFetchingNextPage,
    isFetchingPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isRefetching
  } = useQuizCommentsQuery();

  const [scrollY, setScrollY] = useState(0);
  const [documentHeight, setDocumentHeight] = useState(0);
  const docHeight = document.documentElement.scrollHeight;

  const handleScroll = () => {
    setScrollY(window.scrollY);
  };

  const updateDocumentHeight = () => {
    setDocumentHeight(document.documentElement.scrollHeight);
  };

  useEffect(() => {
    // 스크롤 이벤트 리스너 등록
    window.addEventListener('scroll', handleScroll);

    updateDocumentHeight();
    window.addEventListener('resize', updateDocumentHeight);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', updateDocumentHeight);
    };
  }, []);

  console.log('scrollY =>', scrollY);
  console.log('docHeight =>', docHeight);
  console.log('documentHeight =>', documentHeight);

  return (

여기서 궁금증. 

document의 전체 높이? 를 바로

const docHeight = document.documentElement.scrollHeight;

컴포넌트 상단에 이렇게 선언하는 것과

  const [documentHeight, setDocumentHeight] = useState(0);
  
  ...
  
    const updateDocumentHeight = () => {
    setDocumentHeight(document.documentElement.scrollHeight);
  };
  
    useEffect(() => {
    ...
    updateDocumentHeight();
    window.addEventListener('resize', updateDocumentHeight);

    return () => {
      window.removeEventListener('resize', updateDocumentHeight);
    };
  }, []);

상태를 만든 뒤 useEffect 내에서 set 해준 결과값이 달랐다.

왜 다르지? 뭐가 더 맞는 걸까?

후자 즉, useEffect 내에서 document의 전체 높이를 구하는 데에 더 맞는 방법이다.
document의 마운트 되어 렌더링이 완료되는 과정에서 DOM 상태가 달라질 수 있기 때문이다.

OK. document의 전체 높이는 구했는데 또 궁금증.

scrollY !== documentHeight?

이대로 스크롤을 가장 밑으로 내리면, scrollY와 documentHeight의 값이 같아야 하는데 달랐다.

알고보니 scrollY는 지금까지 스크롤 한 곳까지의 높이는 맞지만, 
스크롤한 곳의 가장 상단까지의 높이라고 한다.
좀 더 정확하게는 mdn 문서에 따르면 scroll Y는 현재 뷰포트 위쪽 모서리의 Y좌표를 반환 한다고 되어있다.
https://developer.mozilla.org/ko/docs/Web/API/Window/scrollY

Window.scrollY - Web API | MDN

따라서, scrollY와 documentHeight를 같게 하려면 scrollY + 뷰포트의 높이를 더해줘야 한다.

---

시행착오 2

그래서 documentHeight를 제대로 구하기로 하고, scrollY + viewportHeihgt === documentHeight가 되도록 수정했다.

const handleScroll = () => {
    const scrollPosition = window?.scrollY;
    setScrollY(scrollPosition);

  };

  const updateDocumentHeight = () => {
    setDocumentHeight(document.documentElement.scrollHeight);
    setViewportHeight(window?.innerHeight);
  };

  const [scrollY, setScrollY] = useState(0);
  const [viewportHeight, setViewportHeight] = useState(0);
  const [documentHeight, setDocumentHeight] = useState(0);

 useEffect(() => {
    handleScroll();
    // 스크롤 이벤트 리스너 등록
    window.addEventListener('scroll', handleScroll);

    updateDocumentHeight();
    window.addEventListener('resize', updateDocumentHeight);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', updateDocumentHeight);
    };
  }, []);

  console.log('scrollY =>', scrollY);
  console.log('viewportHeight =>', viewportHeight);
  console.log('scrollY + viewportHeight =>', scrollY + viewportHeight);
  console.log('documentHeight =>', documentHeight);
  console.log('------------------------------------');

아니 그런데도 스크롤을 최상단으로 내렸을 때, documentHeight와 scrollY + viewportHeight가 다른 것 아닌가ㅠ

2100 !== 1629....

뭐가 문제인지 한참을 쳐다보니 당연한 결과였다.
나는 지금 viewportHeight와 documentHeight 값을 마운트 된 후와 resize 이벤트가 발생했을 때만 업데이트 하고 있었다..
scroll 이벤트가 발생할 때 scrollY와 한꺼번에 업데이트 해야하는데 말이다. U hoxy 바카??

다시 바꿨다.

const {
    data: quizComments,
    isFetchingNextPage,
    isFetchingPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isRefetching
  } = useQuizCommentsQuery();

  const [scrollY, setScrollY] = useState(0);
  const [viewportHeight, setViewportHeight] = useState(0);
  const [documentHeight, setDocumentHeight] = useState(0);

  const handleScroll = () => {
  // 한꺼번에 업데이트
    const scrollPosition = window?.scrollY;
    setScrollY(scrollPosition);
    setDocumentHeight(document.documentElement.scrollHeight);
    setViewportHeight(window?.innerHeight);
  };

  useEffect(() => {
    handleScroll();
    // 스크롤 이벤트 리스너 등록
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', handleScroll);
    };
  }, []);

  console.log('scrollY =>', scrollY);
  console.log('viewportHeight =>', viewportHeight);
  console.log('scrollY + viewportHeight =>', scrollY + viewportHeight);
  console.log('documentHeight =>', documentHeight);
  console.log('------------------------------------');

다행히 이렇게 했더니 스크롤을 가장 하단으로 내렸을 때

scrollY + viewportHeight 가 documentHeight와 거의 비슷한 숫자가 되었다. 휴..

자 그럼 이런 개념들을 알았으니 드디어!! 무한스크롤을 구현해보자!

  const handleScroll = useCallback(() => {
    const scrollPosition = window?.scrollY;
    const docHeight = document.documentElement.scrollHeight;
    const viewHeight = window.innerHeight;

    if (scrollPosition + viewHeight >= docHeight * 0.8) {
      if (hasNextPage && !isFetchingNextPage) {
        fetchNextPage();
      }
    }
  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
  
    useEffect(() => {
    handleScroll();
    // 스크롤 이벤트 리스너 등록

    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', handleScroll);
    };
  }, [handleScroll]);

이렇게 한 뒤에 구현된 걸 보면 이렇게 된다.

---

시행착오 3

그런데 음... 이렇게 하니까
보다시피 Devtools에는 스크롤 다운에 따라서 새로운 데이터들을 누적하여 받아지는 것은 되지만,  
유저로 하여금 언제 정확히 데이터를 더 fetching 하는 것인지 알 수가 없었다.

그래서 두 번째 무한스크롤 방법인
intersection-observer의 useInview를 사용할 때와 같이 어떤 요소에 ref 값을 준 뒤
그 요소의 일정 퍼센트 이상 스크롤 다운이 되면 fetchNextPage() 함수를 호출하는 것도 시도해보았다.
이렇게 되면 어느정도가 되어야 데이터가 추가적으로 fetch 되는지 가시적으로 더 명확하기 때문이다.

우선 기준이 될 요소와 ref를 부여한다.

const QuizCommentsList = () => {
  const {
    data: quizComments,
    isFetchingNextPage,
    isFetchingPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isRefetching
  } = useQuizCommentsQuery();

  const targetRef = useRef<HTMLDivElement | null>(null);
  ...
  return (
  ...
  <div ref={targetRef} className="w-[300px] h-[300px] bg-gray-300"></div>
  )
  };

그럼 그 ref의 가장 상단까지의 높이를 어떻게 구할까?
예전에 스크롤 할 때 사용했던 getBoundingClientRect()가 생각났다.

그런데 여기서 또 주의할 점!

getBoundingClientRect().top 으로 위에서부터 ~ 해당 요소의 상단까지 위치를 구할 때도 그 '위' 라는 기준이
전체 document가 아니라, 뷰포트의 상단이 된다.
https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

Element.getBoundingClientRect() - Web API | MDN

결국에는 getBoundingClientRect().top 만 해서는 안 되고,
지금까지 scroll한 곳까지의 높이 + getBoundingClientRect().top 을 해야 
실제로 해당 요소의 상단까지의 거리가 나온다.

이걸 바탕으로 코드를 짜면..!!

---

what(결과) - To Be

const QuizCommentsList = () => {
  const {
    data: quizComments,
    isFetchingNextPage,
    isFetchingPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isRefetching
  } = useQuizCommentsQuery();

  const targetRef = useRef<HTMLDivElement | null>(null);

  const handleScroll = useCallback(() => {
    const scrollPosition = window.scrollY;
    const viewportHeight = window.innerHeight;

    if (targetRef.current) {
      const rect = targetRef.current.getBoundingClientRect();
      const targetTop = rect.top + scrollPosition;
      const targetPosition = targetTop + rect.height * 0.5;

      if (targetPosition <= scrollPosition + viewportHeight) {
        if (!hasNextPage || isFetchingNextPage) return;
        fetchNextPage();
      }
    }
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);

  useEffect(() => {
    handleScroll();

    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', handleScroll);
    };
  }, [handleScroll]);

  return (
  ...

---

💡 새롭게 알게된 점

스크롤을 내릴 때의 위치는 scrollY에 뷰포트의 높이를 더해줘야 한다는 것과
getBoundingClientRect()는 뷰포트의 상단을 기준으로 요소의 상단까지의 거리라는 것을 배웠다!