For

For는 배열 렌더링과 빈 상태 처리를 하나로 합친 컴포넌트입니다. map과 추가 조건문을 하나의 선언적 블록으로 대체합니다.

function For<T extends Array<unknown>>(props: {
  each: T | null | undefined;
  children: (item: T[number], index: number) => React.ReactNode;
  fallback?: React.ReactNode;
}): React.ReactNode;

기본 사용법#

렌더 함수로 항목을 그리며, 배열이 비어있거나 null/undefined일 때 fallback을 표시할 수 있습니다.

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

function TodoList({ todos }) {
  return (
    <For each={todos} fallback={<div>할 일이 없습니다.</div>}>
      {(todo, index) => <div key={index}>{todo.text}</div>}
    </For>
  );
}

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

For.ul 또는 For.div를 사용하면 컨테이너를 유지한 채 내부 리스트만 교체할 수 있습니다.

<For.ul each={items} className="list">
  {(item, index) => <li key={index}>{item.name}</li>}
</For.ul>

키 처리#

렌더 함수가 반환하는 요소에는 안정적인 key를 지정하세요.

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

function ProductList({ products }) {
  return (
    <For each={products}>
      {(product) => <ProductCard key={product.id} product={product} />}
    </For>
  );
}