무한 스크롤, 내 환경에서는 되는데 팀원들은 안 된다고?

무한 스크롤을 구현하고 자랑스럽게 배포까지 했는데 이게 무슨 일이야... 분명히 제 환경에서는 동작하는 무한 스크롤이 글쎄 팀원들의 환경에서는 동작하지 않는 끔찍한 문제가...

 

일단 무한 스크롤을 어떻게 구현했는지 살펴 보시죠.

useEffect(() => {
    if (!loadRef.current || !hasNextPage) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) fetchNextPage();
    });

    observer.observe(loadRef.current);
    return () => observer.disconnect();
  }, [hasNextPage, fetchNextPage]);

IntersectionObserver를 생성하여 타겟 요소가 화면에 들어오는지 감지합니다.
entry.isIntersecting이 true가 되면 fetchNextPage() 실행하는 observer를 선언합니다.
그리고 loadRef.current를 감시하도록 observer.observe() 호출합니다.
useEffect의 정리 함수에서 observer.disconnect()로 관찰을 중지하여 불필요한 리소스 사용 방지합니다.

즉, loadRef가 뷰포트에 들어오면 fetchNextPage()를 호출하여 새로운 데이터를 불러오도록 구현하였습니다.

🎯 문제 상황 : IntersectionObserver에 타켓 요소가 감지되지 않는 문제

<div ref={loadRef} className="w-2 h-2"></div>

타겟 요소를 w-2 h-2로 설정한 후 화면을 모바일 환경으로 줄인 후 entry.intersectionRatio를 콘솔을 통해 확인해보았습니다.

false만 출력되고, 스크롤을 내려도 false에서 값이 변하지 않는 것을 확인하였습니다.

🚨 즉, 요소가 뷰포트에 들어와도 감지되지 않는 것을 알게 되었습니다.

✅  해결 방법 : 요소의 크기를 늘려 감지될 가능성을 높이자!

 <div ref={loadRef} className="w-full h-5 text-center">
    더보기
 </div>

단순히 타겟 요소의 크기를 늘린 후 다시 console을 확인해 보면

요소가 화면에 들어오면 true로 변경되는 것을 알 수 있습니다.

 

일반적으로 threshold 값을 높이면 요소가 일정 부분 이상 보일 때 감지되도록 조정할 수 있습니다.
하지만 저는 설정값을 바꾸는 대신, 요소의 크기를 키워 감지 가능성을 확실히 높이는 방법을 선택했습니다.

threshold 조정은 보조적인 방법일 뿐, 요소 크기를 충분히 키우는 것이 더 확실한 해결책이라고 생각됩니다!

 

팀원들의 환경마다 뷰포트의 정도가 달라 있었던 트러블이었습니다.
앞으로는 다양한 환경에서의 뷰포트를 고려하며 구현을 해야겠습니다~

 

참고

https://velog.io/@oneook/Intersection-Observer-%EB%B7%B0%ED%8F%AC%ED%8A%B8-%EB%85%B8%EC%B6%9C-%EA%B0%90%EC%A7%80-APIs