[javascript] Svelte에서 리스트를 동적으로 렌더링하는 방법은 어떻게 되나요?
  1. 리스트 데이터 정의하기: 리스트에 표시할 항목들의 데이터를 정의해야 합니다. 예를 들어, items라는 배열에 항목을 저장합니다.
let items = ['item1', 'item2', 'item3'];
  1. 각 항목을 렌더링하기 위한 반복문 사용하기: 리스트를 렌더링하기 위해 each 디렉티브를 사용합니다. 이 디렉티브는 items 배열을 순회하면서 각 항목을 렌더링합니다.
{#each items as item}
    <div>{item}</div>
{/each}
  1. 리스트에 새 항목 추가하기: 새로운 항목을 리스트에 추가하려면 push 메서드를 사용합니다.
function addItem() {
    items.push('new item');
}
  1. 리스트에서 항목 제거하기: 리스트에서 항목을 제거하려면 splice 메서드를 사용합니다.
function removeItem(index) {
    items.splice(index, 1);
}
  1. 키(key) 속성 사용하기: 리스트의 각 항목에 고유한 키를 지정하면 Svelte가 변경된 항목만 업데이트합니다. 이를 통해 효율적인 렌더링을 달성할 수 있습니다.
{#each items as item (item.id)}
    <div>{item.name}</div>
{/each}

위와 같은 방식으로 Svelte에서 리스트를 동적으로 렌더링할 수 있습니다. Svelte는 데이터 변경에 따라 자동으로 업데이트되므로 개발자는 UI 업데이트를 수동으로 관리할 필요가 없습니다.