삼성엔지니어링 EDP

// hooks/useInfiniteScroll.ts — IntersectionObserver 기반 무한 스크롤 (React + RTK)
import { useEffect, useRef } from "react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { fetchPage, selectInfinite } from "@/store/itemsSlice";

export function useInfiniteScroll() {
  const sentinelRef = useRef<HTMLDivElement>(null);
  const dispatch = useAppDispatch();
  const { loading, done, page } = useAppSelector(selectInfinite);

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

    // 센티넬 진입 시에만 dispatch — 스크롤 이벤트 대신 옵저버로 리렌더 부하 최소화
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !loading && !done) {
          dispatch(fetchPage(page));
        }
      },
      { rootMargin: "200px" }
    );

    observer.observe(sentinelRef.current);

    // 언마운트 시 옵저버 해제 — DOM 분리 후에도 살아남는 메모리 누수 차단
    return () => observer.disconnect();
  }, [dispatch, loading, done, page]);

  return sentinelRef;
}

포트폴리오 설명을 위해 NDA 범위 안에서 재구성한 코드 예시입니다. 실제 저장소 원문이나 고객사 기밀 정보는 포함하지 않았습니다.