<!-- [코드 6-1] App.svelte-->
<script>
let companys = [
{ id : '0', name : 'asus'},
{ id : '1', name : 'lenovo'},
{ id : '2', name : 'samsung'},
{ id : '3', name : 'apple'},
];
function deleteLast() {
companys.pop();
companys = companys;
}
</script>
<button on:click={deleteLast}>
Delete
</button>
<ul>
{#each companys as company (company.id)}
<li>{company.name}</li>
{/each}
</ul>
반복문 내에서 key를 사용하면 불필요한 리렌더링을 방지할 수 있다.
key는 Number, String이 권장된다.
<!-- [코드 6-2] App.svelte-->
{#each ['a', 'b', 'c', 'd', 'e'] as num, index}
<div>{index} {num}</div>
{/each}
index도 뽑을 수 있다.
<!-- [코드 6-3] App.svelte-->
{#each [] as el}
있다
{:else}
없다
{/each}
{:else}
와 {/each}
사이의 구문은 반복블록의 컨테이너가 빈 배열일 때 실행된다.
<!-- [코드 6-4-1] App.svelte-->
<script>
import Child from './Child.svelte';
let num = 0;
</script>
{#key num}
<Child />
{/key}
<button on:click={()=>{num++}}>num++</button>
<!-- [코드 6-4-2] Child.svelte-->
<h1 contenteditable>edit me</h1>
#key
옆에 있는 변수의 값이 바뀔 때, 블록 안의 컴포넌트를 파괴하고 새로 생성한다.