Observer

Observer는 뷰포트 기반 렌더링을 통해 초기 로드 비용과 불필요한 렌더링을 줄이는 성능 최적화용 컴포넌트입니다. 내부적으로는 조건부 렌더링을 담당하는 Show 컴포넌트와, 요소의 가시성 변화를 감지하는 useIntersectionObserver 훅을 조합해 구현되어 있습니다. 이 조합은 이미지 지연 로딩, 무한 스크롤, 스크롤 기반 애니메이션 트리거 등 실제 사용자가 보는 시점에만 무거운 작업을 수행하도록 설계되어 초기 렌더링을 가볍게 만듭니다.

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>>

기본 사용법#

가장 간단한 형태에서는 Observer에 fallback을 제공하고, 대상 요소가 뷰포트에 진입하면 실제 children이 렌더링됩니다. 예: 이미지를 지연 로드하거나, 아래로 스크롤했을 때만 무거운 컴포넌트를 마운트하는 경우에 유용합니다.

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

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

고급 사용법#

onIntersect 콜백을 활용하면 특정 지점에 도달했을 때 데이터 프리페칭, 분석 이벤트 전송, 또는 UI 전환을 자동으로 수행할 수 있습니다. 예를 들어 사용자가 섹션에 도달하면 해당 섹션 관련 API를 미리 호출해 지연 시간을 줄이거나, 무한 스크롤에서 다음 페이지를 미리 로드하는 패턴에 활용할 수 있습니다.

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

useIntersectionObserver#

내부에서 사용하는 useIntersectionObserver 훅은 복잡한 Intersection Observer API를 간단한 React 훅으로 추상화합니다. Intersection Observer는 요소의 가시성을 효율적으로 감지할 수 있는 브라우저 API이지만, 직접 사용하면 설정과 정리 로직이 복잡합니다. 이 훅은 Intersection Observer를 React의 라이프사이클에 맞게 추상화하여, ref와 상태만으로 간단하게 요소의 뷰포트 진입 여부를 추적할 수 있게 해줍니다. 스크롤 애니메이션, 지연 로딩, 무한 스크롤 등 다양한 시나리오에서 활용할 수 있습니다.

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;
};