Svelte TIL 06

참고

Svelte.js 완벽 가이드 - HEROPY

---

반복블록 key

<!-- [코드 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이 권장된다.

반복블록 index

<!-- [코드 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} 사이의 구문은 반복블록의 컨테이너가 빈 배열일 때 실행된다.

key 블록

<!-- [코드 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옆에 있는 변수의 값이 바뀔 때, 블록 안의 컴포넌트를 파괴하고 새로 생성한다.