끝없는 스크롤 구현

무한 스크롤 기능은 프로젝트의 이미지를 불러오는 데 필수적이라고 생각했고, 여러 블로그를 참조하여 얻은 정보를 정리하고 싶습니다.

교차 관찰자 API

스크롤 이벤트를 사용한 구현보다 성능과 동작이 더 나은 Intersection Observer API를 사용할 수 있습니다.

기본값을 기준으로 뷰포트와 대상에 의해 캡처된 요소의 교차점을 관찰합니다.

지정된 값의 교차점에 오면 콜백을 실행하고 컴포넌트가 언마운트되면 클린업 함수를 호출해 모니터링을 멈출 때까지 분리한다.

const useIntersect = (onIntersect: IntersectHandler, options?: IntersectionObserverInit) => {
  const ref = useRef(null);
  const callback = useCallback(
    throttle((entries: IntersectionObserverEntry(), observer: IntersectionObserver) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) onIntersect(entry, observer);
      });
    }, 200),
    (onIntersect),
  );

  useEffect(() => {
    if (!
ref.current) return;
    const observer = new IntersectionObserver(callback, options);
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, (ref, options, callback));

  return ref;
};

(참조): https://tech.kakaoenterprise.com/149

useIntersect 후크는 위의 사이트를 가리키고 IntersectionObserver 개체가 useEffect에 생성되고 현재 요소가 관찰됩니다.

교차점을 만나면 콜백 함수가 실행되고 각 대상 항목에 대해 onIntersect()가 실행됩니다.

const observerRef = useIntersect(
    async (entry, observer) => {
      observer.unobserve(entry.target);
      if (
        !
filterSelectTerm &&
        !
defaultImgListLoading &&
        !
imgDataLoading &&
        defaultImageList?.loadDataLength === 12
      ) {
        defaultImgListTrigger({
          start: readStartNumber,
        });
      }

      if (
        filterSelectTerm &&
        !
filterImgListLoading &&
        !
imgDataLoading &&
        filterImageList?.loadDataLength === 12
      ) {
        filterImgListTrigger({
          start: readStartNumber,
          start_date: filterSelectTerm.startDate,
          end_date: filterSelectTerm.endDate,
        });
      }
    },
    {
      threshold: 0.5,
    },
  );
  
  
  /*    ....     */
  
  
  return (
        <ImageContentList
        ImageData={filterSelectTerm ? filterImage : postedImage}
        observerRef={observerRef}
    />);

위 코드는 프로젝트에 적용된 코드의 일부입니다.

useIntersect() 후크를 사용하고 콜백이 교차점을 넘어 실행되면 이전에 데이터를 로드하는 데 사용된 대상은 unobserved()이고 다음 대상은 다음 데이터를 로드하기 위해 ObserverEntry 배열에 삽입됩니다.

것이 가능하다.

useIntersect()의 콜백에서 defaultImgListTrigger 및 filterImgListTrigger는 데이터 요청 함수이며 데이터가 로드될 때 데이터 가져오기를 요청하지 않도록 분기했습니다.

참조 페이지

https://tech.kakaoenterprise.com/149

React로 무한 스크롤 연습하기

Welcome to start 카카오엔터프라이즈 워킹코어 개발셀에서 프론트엔드 개발을 담당하고 있는 데니스(배형진)입니다.

약 1년 전에 저는 Choosing a Framework, React vs Angular라는 제목의 포스트를 썼습니다.

tech.kakaoenterprise.com

https://coffeeandcakeandnewjeong.52#

(React) React 가상화로 무한 스크롤링 구현

coffeeandcakeandnewjeong.tistory.com