svelte 주의해야할 keypoint

Keyed each blocks

Svelte에서 each 블록을 사용해 리스트를 렌더링할 때, keyed와 unkeyed 방식의 주요 차이점은 DOM 엘리먼트의 재사용과 관련이 있습니다. 이 차이는 특히 리스트의 아이템이 변경, 추가, 삭제될 때 성능과 동작의 최적화에 중요한 역할을 합니다.

Keyed Each

keyed 방식에서는 각 아이템을 식별할 수 있는 고유한 키를 제공합니다. 이 키는 리스트의 아이템이 변경, 추가, 또는 삭제될 때 Svelte가 각 아이템을 정확하게 추적하고, 필요한 DOM 변경만을 수행하도록 도와줍니다. 이 방식은 특히 아이템의 순서가 바뀌거나, 특정 아이템만 업데이트되어야 할 때 유용합니다.

{#each things as thing (thing.id)}
  <Thing current={thing.color} />
{/each}

여기서 (thing.id)는 각 thing 아이템의 고유한 키입니다. 이 키를 통해 Svelte는 리스트의 아이템이 변경될 때 어떤 아이템이 추가, 변경, 삭제되었는지 정확히 알 수 있고, DOM을 효율적으로 업데이트할 수 있습니다.

Unkeyed Each

unkeyed 방식에서는 각 아이템에 대한 고유 키를 제공하지 않습니다. 이 경우, Svelte는 리스트의 아이템을 순서대로 처리하며, 아이템의 추가나 삭제가 발생하면 그에 따라 DOM 엘리먼트를 재생성합니다. 이 방식은 간단한 리스트나 아이템의 변경이 빈번하지 않은 경우에 적합할 수 있습니다.

{#each things as thing}
  <Thing current={thing.color} />
{/each}

차이점 요약

• Keyed Each는 리스트의 아이템이 변경될 때 각 아이템을 정확하게 추적하고, 최소한의 DOM 변경으로 뷰를 업데이트합니다. 이 방식은 성능 최적화에 유리하며, 아이템의 순서 변경이나 선택적 업데이트가 필요한 경우에 적합합니다.
• Unkeyed Each는 간단한 리스트에 적합하며, 아이템의 추가나 삭제가 리스트 전체의 재렌더링을 유발할 수 있습니다. 이 방식은 구현이 더 간단하지만, 복잡한 리스트의 경우 성능 저하를 초래할 수 있습니다.

일반적으로, 리스트의 동적인 변경이 예상되거나 성능 최적화가 중요한 경우에는 keyed each 방식을 사용하는 것이 좋습니다.