끝없는 스크롤 구현

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

교차 관찰자 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