SeparatedIterator

Iterator를 확장해 items props로 주어진 배열을 반복하면서 각 항목에 대해 특정 요소 및 컴포넌트를 렌더링하며, 동시에 각 요소 사이에 구분자(Separator)를 렌더링 하는 컴포넌트입니다.

기본적으로 마지막 요소의 Separator는 제외됩니다. 하지만, includeLastSeparator를 true로 설정하면 포함시킬 수 있습니다.

또한, separatorInterval를 활용해 특정 간격 만큼 Separator를 렌더링 할 수 있습니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface SeparatedIteratorProps<T> extends IteratorProps<T> {
  separator: JSX.Element;
  separatorInterval?: number; // default: 1
  includeLastSeparator?: boolean; // default: false
}

const SeparatedIterator: <T>({
  itemKey,
  items,
  separator,
  renderItem,
  separatorInterval,
  includeLastSeparator,
}: SeparatedIteratorProps<T>) => JSX.Element;

Props

Name	Type	Default	Description
items	T[] | readonly T[] | undefined	-	렌더링할 배열
renderItem	(item: T, index: number) => JSX.Element	-	각 항목을 렌더링하는 함수
separator	JSX.Element	-	각 항목 사이에 렌더링할 구분자 컴포넌트
itemKey	keyof T | string	-	각 요소의 고유 키로 사용할 프로퍼티명
separatorInterval	number	1	구분자를 렌더링할 간격
includeLastSeparator	boolean	false	마지막 항목 뒤에도 구분자를 포함할지 여부

Usage

typescript

import { SeparatedIterator } from '@modern-kit/react';

interface Item {
  id: number;
  name: string;
}

const Example = () => {
  const items: Item[] = [
    { id: 1, name: 'Gromit' },
    { id: 2, name: 'Dylan' },
    { id: 3, name: 'Minjae' },
  ];

  return (
    <SeparatedIterator
      items={items}
      renderItem={(item) => (
        <h3>
          id: {item.id}, name: {item.name}
        </h3>
      )}
      separator={<div style={{ height: '3px', backgroundColor: 'gray' }} />}
    />
  );
};

Example

id: 1, name: Gromit

id: 2, name: Dylan

id: 3, name: Minjae