For
For는 children(item, index)를 호출해 array를 렌더링합니다. each가 null, undefined, empty이면 fallback을 렌더링합니다.
import { For } from '@ilokesto/utilinent';
<For each={users} fallback={<p>No users found.</p>}>
{(user) => <UserCard key={user.id} user={user} />}
</For>프로퍼티
| Prop | Type | 설명 |
|---|---|---|
each | T[] | null | undefined | 렌더링할 array입니다. 비었거나 없으면 fallback을 렌더링합니다. |
children | (item, index) => ReactNode | 각 item의 render function입니다. |
fallback | ReactNode | Empty-state UI입니다. 기본값은 null입니다. |
태그 형태
<For.ul each={todos} fallback={<li>No todos</li>} className="todos">
{(todo) => <li key={todo.id}>{todo.title}</li>}
</For.ul>Tag form은 wrapper element를 만듭니다. Semantic HTML을 지키려면 ul 안에는 li처럼 맞는 child element를 반환하세요.
키
For는 key를 대신 만들지 않습니다. Array를 렌더링할 때는 render function에서 keyed element를 반환하세요.
<For each={items}>{(item) => <Row key={item.id} item={item} />}</For>