Repeat

Repeat는 동일한 UI 블록을 지정한 횟수만큼 렌더링합니다. 스켈레톤, 별점, 플레이스홀더에 유용합니다.

function Repeat(props: {
  times: number;
  children: (index: number) => React.ReactNode;
  fallback?: React.ReactNode;
}): React.ReactNode;

기본 사용법#

times에 양의 정수를 지정하고 인덱스를 받아 렌더링합니다. times가 유효하지 않으면 fallback이 렌더링됩니다.

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

function StarRating({ rating }) {
  return (
    <Repeat times={rating}>
      {(index) => <span key={index}>⭐️</span>}
    </Repeat>
  );
}

DOM 구조 유지 및 레이아웃 안정성#

Repeat.div 같은 태그 변형은 래퍼 요소를 유지한 채 내용을 반복합니다.

<Repeat.div times={3} className="skeleton">
  {(index) => <div key={index} className="skeleton-item" />}
</Repeat.div>