[SVELTE] #each

{#each…}

스벨트는 반복 가능한 데이터 구조에 한하여, 컴포넌트에 데이터를 전달하여 렌더 할 수 있습니다.

{#each expression as name}...{/each}
{#each expression as name, index}...{/each}
{#each expression as name (key)}...{/each}
{#each expression as name, index (key)}...{/each}
{#each expression as name}...{:else}...{/each}

<h1>Shopping list</h1>
<ul>
    {#each items as item}
        <li>{item.name} x {item.qty}</li>
    {/each}
</ul>

반복 가능한 배열은 각 블럭마다 반복 횟수에 맞는 index를 가진 값을 사용 할 수 있습니다.

each블럭은 length 프로퍼티를 가진 배열과 유사한 데이터 구조라면 사용 가능합니다.

{#each items as item, i}
    <li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

each 블럭은 index를 함께 사용 할 수 있습니다. 이 구조는 Array.map의 콜백 함수 전달인자와 동일합니다.

{#each items as item (item.id)}
    <li>{item.name} x {item.qty}</li>
{/each}

<!-- or with additional index value -->
{#each items as item, i (item.id)}
    <li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

만약 each블럭에 각 아이템에 맞는 유니크한 key를 제공한다면, 스벨트는 이것을 사용하여, 데이터가 변경 될때만 새롭게 렌더링 합니다. (Key 를 명시 하지 않는 경우, 배열의 값이 추가되거나 삭제되면 새롭게 렌더링 됩니다. ) key는 객체형태도 사용 가능하지만, 문자열 혹은 숫자 타입이 추천됩니다.

{#each items as { id, name, qty }, i (id)}
    <li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
    <li><span>{id}</span><MyComponent {...rest}/></li>
{/each}

{#each items as [id, ...rest]}
    <li><span>{id}</span><MyComponent values={rest}/></li>
{/each}

each블럭에서는 구조 분해(destructuring)를 사용하거나,
나머지 패턴(...rest)을 사용 할 수 있습니다.

{#each todos as todo}
    <p>{todo.text}</p>
{:else}
    <p>No tasks today!</p>
{/each}

만약 순회가능한 자료구조에 데이터가 존재하지 않는 경우를 대비하여, 다른 것을 렌더링 할 수 있습니다.
#svelte