Slacker

Slacker는 대용량 웹 애플리케이션에서 초기 로드 비용을 줄이고 사용자 경험을 개선하기 위해 설계된 데이터 지연 로딩 컴포넌트입니다. 내부적으로는 뷰포트 감지를 담당하는 Observer와 결합되어, 해당 컴포넌트가 실제로 뷰포트에 진입했을 때만 비동기 loader를 실행합니다. 이 접근 방식은 API 호출, 동적 import, 무거운 데이터 페칭 등 비용이 큰 작업을 필요 시점에만 수행하게 하여 초기 렌더 시간을 크게 단축합니다.

function Slacker<T = any>(props: {
  loader: () => Promise<T> | T;
  children: (data: T) => React.ReactNode;
  loadingFallback?: React.ReactNode;
  errorFallback?: React.ReactNode | ((props: {
    error: Error;
    retry: () => void;
    isLoading: boolean;
  }) => React.ReactNode);
  threshold?: number | number[];
  rootMargin?: string;
  onError?: (error: Error) => void;
  maxRetries?: number;
  retryDelay?: number;
}): React.ReactElement;

기본 사용법#

간단한 사용 예에서는 loader를 전달하고, 요소가 뷰포트에 진입하면 로더가 실행되어 반환된 데이터를 children에 전달합니다. 예: 큰 이미지 컬렉션, 위젯 데이터, 또는 페이지 섹션별 API 결과를 지연 로드할 때 유용합니다.

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

function UserProfile({ userId }) {
  return (
    <Slacker
      loader={() => fetch(`/api/users/${userId}`).then(r => r.json())}
      loadingFallback={<Spinner />}
      errorFallback={<ErrorMessage />}
    >
      {(user) => (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      )}
    </Slacker>
  );
}

에러 처리 및 재시도#

errorFallback에 함수를 전달하면 에러 정보와 재시도 함수를 받아 커스텀 UI를 렌더링할 수 있습니다. maxRetries와 지연 간격(backoff)을 설정해 자동 재시도를 구성할 수 있으며, 네트워크 오류나 일시적 실패를 우아하게 처리할 수 있습니다.

<Slacker
  loader={fetchData}
  maxRetries={3}
  retryDelay={2000}
  loadingFallback={<Spinner />}
  errorFallback={({ error, retry }) => (
    <div>
      <p>오류: {error.message}</p>
      <button onClick={retry}>재시도</button>
    </div>
  )}
  onError={(err) => console.error('Failed to load:', err)}
>
  {(data) => <Content data={data} />}
</Slacker>