Slacker

Slacker는 뷰포트에 들어올 때 데이터를 로딩합니다. Observer와 loader를 결합해 로딩/에러/재시도 상태를 처리합니다.

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에서 렌더링합니다.

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, maxRetries, retryDelay로 실패를 우아하게 처리합니다.

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