Observer

Observer는 요소가 뷰포트에 들어왔을 때만 children을 렌더링합니다. 보이지 않을 때는 fallback을 보여주고 교차 시점에 콜백을 받을 수 있습니다.

const Observer: ForwardRefExoticComponent<{
  children?: React.ReactNode | ((isIntersecting: boolean) => React.ReactNode);
  fallback?: React.ReactNode;
  threshold?: number | number[];
  rootMargin?: string;
  triggerOnce?: boolean;
  onIntersect?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
} & RefAttributes<HTMLDivElement>>

기본 사용법#

fallback으로 플레이스홀더를 제공하고, 보이는 순간에만 무거운 콘텐츠를 마운트하세요.

import { Observer } from '@ilokesto/utilinent';

function InfiniteScrollTrigger({ onLoadMore }) {
  return (
    <Observer 
      onIntersect={(isVisible) => {
        if (isVisible) {
          onLoadMore();
        }
      }}
    >
      <Spinner />
    </Observer>
  );
}

한 번만 트리거 & 콜백#

triggerOnce로 첫 교차 이후 관찰을 멈추고, onIntersect로 사이드 이펙트를 실행할 수 있습니다.

function SomeSection({ productId }) {
  return (
    <>
      <Observer
        triggerOnce
        onIntersect={(isVisible) => {
          if (isVisible) {
            // 분석 이벤트 전송
            analytics.track('Product Section Viewed', { productId });
          }
        }}
      />
    </>
  );
}

useIntersectionObserver 훅#

훅은 ref, isIntersecting, entry를 제공해 커스텀 동작을 만들 수 있습니다.

function useIntersectionObserver(options?: {
  threshold?: number | number[];
  root?: Element | null;
  rootMargin?: string;
  freezeOnceVisible?: boolean;
  initialIsIntersecting?: boolean;
  onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
}): {
  ref: (node: HTMLElement | null) => void;
  isIntersecting: boolean;
  entry: IntersectionObserverEntry | undefined;
};