이를 위해서는 Svelte의 반복문인 {#each}를 사용하면 됩니다. 아래는 리스트를 동적으로 렌더링하는 예시입니다.

<script>
  let items = ['사과', '바나나', '딸기'];
  
  function addItem() {
    items = [...items, '오렌지'];
  }
  
  function removeItem(index) {
    items = items.filter((_, i) => i !== index);
  }
</script>

<button on:click={addItem}>아이템 추가</button>

<ul>
  {#each items as item, index}
    <li>
      {item}
      <button on:click={() => removeItem(index)}>삭제</button>
    </li>
  {/each}
</ul>

위의 코드에서는 items라는 배열에 초기 아이템들이 담겨있습니다. addItem() 함수는 새로운 아이템인 ‘오렌지’를 items 배열에 추가합니다. removeItem(index) 함수는 해당 인덱스의 아이템을 배열에서 제거합니다.

화면에는 ul 태그 안에 {#each}로 감싸진 블록을 사용하고, items의 각 아이템을 순회하면서 리스트를 출력합니다. 각 아이템 옆에는 삭제 버튼도 추가되어 있습니다.

이제 위의 코드를 실행하면, 버튼을 클릭하여 아이템을 추가하거나 삭제할 수 있습니다.

Svelte의 강력한 반응성과 컴포넌트 기반 아키텍처는 동적인 리스트를 만드는 데 매우 효과적입니다. Svelte는 변경된 데이터만 업데이트하고 효율적으로 렌더링하는 방식이기 때문에, 성능도 우수합니다.