Repeat

Repeat은 동일한 UI 블록을 반복적으로 렌더링할 때 사용하는 간결한 유틸리티입니다. 내부적으로는 리스트 렌더링 전용인 For 컴포넌트를 활용해 구현되어 있어, 인덱스 제공, 빈 상태 처리, 그리고 태그 기반 변형까지 자연스럽게 지원합니다. 스켈레톤 로더, 별점 표시, 그리드 레이아웃 등 반복 패턴을 더 직관적이고 선언적으로 표현할 수 있습니다.

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

기본 사용법#

반복 횟수(count)만 지정하면 되고, 렌더 콜백에서 현재 인덱스를 받아 각 항목에 고유한 값을 부여하거나 콘텐츠를 생성할 수 있습니다. 코드가 간결해지고 의도가 명확해집니다.

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

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

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

Repeat는 태그 기반 변형(예: Repeat.div)을 제공하여 외부 컨테이너를 항상 유지하면서 내부 콘텐츠만 반복할 수 있습니다. 이로 인해 CSS 레이아웃이 깨지는 것을 방지하고, 스켈레톤 또는 그리드 레이아웃에서 일관된 마크업을 유지할 수 있습니다.

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