[Taskify] 무한스크롤 - 해결

무한 스크롤 관련된 문제로 라이브러리를 사용해야 하나 고민이 많았습니다.

우선 문제 상황과 지금까지 시도한 방법들을 간단하게 소개해보겠습니다.

문제 상황

• PC로 확인했을 때는 잘 동작하던 Intersection Observer API가 13인치 노트북으로 확인했더니 작동하지 않는다.
• 브라우저의 크기를 변경한 상태(확대 및 축소)에서 Intersection Observer API가 작동하지 않는다.
  (브라우저의 확대 및 축소 기능을 사용하는 경우까지는 고려하지 않아도 된다고 피드백 받음!!)
• 특정 사이즈에서 Intersection Observer API가 의도한 대로 동작하지 않아 무한 스크롤을 마음대로 동작시킨다.

시도한 방법

• resize 이벤트를 추가해서 브라우저 사이즈가 변경될 때마다 IntersectionObserver를 갱신한다.
• root 요소의 사이즈가 변경될 때 옵저버를 갱신한다.
• DOM이 업데이트가 완료되면 Intersection Observer가 실행될 수 있도록 수정한다.
  (isLoading 플래그를 추가해 비동기 데이터 처리가 끝나면 Intersection Observer가 동작하도록)

mdn의 Intersection Observer API를 다시 정독하다가 해결 방법이 번뜩 떠올라버렸습니다!!!

그것은 바로... threshold 값을 수정하는 것입니다!! 너무 간단한데 이걸로 해결이 가능할까요🤔🤔?

MDN - Intersection Observer API의 threshold 설명
관찰자의 콜백이 무조건 실행되어야 하는 대상의 가시성 백분율을 나타내는 숫자 또는 숫자 배열입니다. 만약 가시성이 50% 지점을 넘는 경우만 감지하고 싶다면, 0.5를 지정하여 사용할 수 있습니다. 만약 가시성이 25%만큼 넘어갈 때마다 콜백을 실행하고 싶다면, [0, 0.25, 0.5, 0.75, 1]을 지정하여 사용할 수 있습니다. 기본 값은 0 입니다. (1 픽셀이라도 보이면, 콜백이 실행됩니다.) 1.0의 값은 모든 픽셀이 가시 상태가 될 때까지 임계값이 통과되지 않는다는 것을 의미합니다.

 

바로 적용해 보겠습니다.

import { useEffect, useRef } from 'react';

function useIntersectionObserver(callback: IntersectionObserverCallback) {
  const observerRef = useRef<IntersectionObserver | null>(null);
  const elementRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!elementRef.current) return;

    observerRef.current = new IntersectionObserver(callback, {
      root: elementRef.current.parentNode as Element,
      // 0일 때는 교차점이 한 번만 발생해도 실행
      // 요소의 경계가 보이기 시작하거나 사라지는 시점에서 콜백을 호출
      threshold: 0, 
    });

    observerRef.current.observe(elementRef.current);

    return () => observerRef.current?.disconnect();
  }, [callback]);

  return elementRef;
}

export default useIntersectionObserver;

이전 작업 때처럼 에러가 발생하는 상황을 방지하기 위해 PC 2대, 노트북, 모바일(아이폰 & 갤럭시)에서 무한 스크롤 동작을 확인했습니다. 모두 정상 동작하네요!! 

 

수정할 부분도 많고 아직 완벽하진 않지만 라이브러리 없이 무한 스크롤을 구현해 봤다는 사실에 아주 큰 성취감을 느꼈습니다.

앞으로도 다른 기능을 구현할 때 라이브러리를 사용하기보다는 직접 구현해 볼 수 있는 용기가 생긴 것 같아 아주 뿌듯하네요😀

 

추가로.. 새로운 기능들 적용해 보기 전에 공식 문서나 참고 자료들 꼼꼼히 읽는 습관을 들여야 할 것 같습니다..😅😅

남은 프로젝트 잘 마무리하고 개발자로 한층 더 성장해 나가겠습니다!

 

 

[Taskify] 대시보드 상세 - 무한 스크롤

 

[Taskify] 대시보드 상세 페이지