For

For는 리스트 렌더링과 빈 상태 처리를 하나로 통합한 선언적 컴포넌트입니다. React에서 리스트를 렌더링할 때 일반적으로 Array.map()을 사용하지만, 빈 배열이거나 데이터가 없을 때의 처리를 위해 추가적인 조건 분기가 필요했습니다. For 컴포넌트는 이러한 패턴을 하나로 통합하여, 배열 순회와 빈 상태 처리를 동시에 선언적으로 표현할 수 있게 해줍니다.

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

기본 사용법#

배열이 비어있을 때의 처리를 별도 조건문 없이 선언적으로 표현할 수 있습니다. fallback은 빈 배열뿐만 아니라 null이나 undefined일 때도 표시됩니다.

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.ui, For.div 같은 태그 기반 변형을 사용하면, 외부 DOM 노드는 항상 존재시키면서 내부 콘텐츠만 조건에 따라 교체할 수 있습니다. 이렇게 하면 레이아웃이나 CSS가 불필요하게 깨지는 것을 방지하고, 시맨틱한 마크업을 유지하면서 조건부 렌더링을 안전하게 적용할 수 있습니다.

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

Forrable#

Forrable은 For 컴포넌트 내부에서 사용되는 특수 컴포넌트로, 정적인 콘텐츠와 동적 리스트를 혼합할 때 유용합니다. For.ul은 항상 렌더링되지만, 내부의 Forrable만 배열의 각 항목에 대해 반복됩니다. 이를 통해 헤더나 푸터 같은 고정 요소는 유지하면서 특정 부분만 반복 렌더링할 수 있습니다.

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

function ProductList({ products }) {
  return (
    <For.ul each={products} className="product-list">
      <li className="header">Product List</li>
      <Forrable>
        {(product, index) => (
          <li key={index}>
            {product.name} - {product.price}
          </li>
        )}
      </Forrable>
      <li className="footer">Total: {products.length} items</li>
    </For.ul>
  );
}