Delay

지정된 시간이 지난 후 children을 렌더링하는 컴포넌트입니다.

Props

이름	타입	설명	기본값
ms	number	children을 렌더링하기 전 대기할 시간(밀리초)	0
fallback	ReactNode	delay 중 보여줄 대체 컨텐츠	-
children	ReactNode | ({ isDelayed }: { isDelayed: boolean }) => ReactNode	렌더링할 컨텐츠 또는 render prop 함수	-

Usage

기본 사용법

children을 지정된 시간만큼 지연시켜 렌더링합니다.

import { Delay } from '@teamsparta/react';

function Example() {
  return (
    <Delay ms={1000}>
      <div>1초 후에 나타납니다</div>
    </Delay>
  );
}

Render Prop 패턴

children을 함수로 전달하면 isDelayed 상태를 받아 조건부 렌더링이 가능합니다.

function FadeInExample() {
  return (
    <Delay ms={500}>
      {({ isDelayed }) => (
        <div
          style={{
            opacity: isDelayed ? 1 : 0,
            transition: 'opacity 500ms',
          }}
        >
          페이드 인 애니메이션
        </div>
      )}
    </Delay>
  );
}

Fallback 사용

delay 중 보여줄 대체 컨텐츠를 지정할 수 있습니다.

function LoadingExample() {
  return (
    <Delay ms={800} fallback={<div>로딩 중...</div>}>
      <div>로딩 완료!</div>
    </Delay>
  );
}

Suspense와 함께 사용

로딩 UI가 즉시 나타나면 화면이 깜빡이는 것처럼 보일 수 있습니다. Delay를 사용하여 로딩 UI 노출을 지연시키면 더 나은 사용자 경험을 제공할 수 있습니다.

import { Suspense } from 'react';
import { Delay } from '@teamsparta/react';

function App() {
  return (
    <Suspense
      fallback={
        <Delay ms={200}>
          <LoadingSkeleton />
        </Delay>
      }
    >
      <Component />
    </Suspense>
  );
}

주의사항

• ms는 0 이상의 숫자여야 합니다. 음수를 전달하면 에러가 발생합니다.
• children이 함수일 때는 fallback prop을 사용할 수 없습니다.
• ms가 0이면 children이 즉시 렌더링됩니다.