Svelte - Iteration

📌 목록

• Introducion
• Each
• Key
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 svelte에서 어떻게 iteration을 하는지에 대해서 알아보겠습니다. vue에서는 마치 v-for 같은 아이가 있어요.

📌 Each

Each라는 키워드를 사용하게 됩니다.

{#each cats as cat}
{/each}

그럼 한번 예제를 볼까요?

<script>
  let students = [
    { id: 1, name: "eddie" },
    { id: 2, name: "sam" },
    { id: 3, name: "cindy" },
  ];
</script>

<h1>STUDENTS</h1>
  <!-- ⭐️ 두번째 인자로는 index를 받아올수 있습니다. -->
 <ul>
  {#each students as student, i}
    <li>
      {i}:
      <b>{student.name}</b>
    </li>
  {/each}
</ul>

혹은 이렇게 destructuring을 할수 있습니다.

<ul>
  {#each students as {name}, i}
    <li>
      {i}:
      <b>{name}</b>
    </li>
  {/each}
</ul>

📌 Key

each 키워드 옆에 ()로 key를 설정 할 수 있습니다.

<ul>
  {#each students as {name, id}, i (id)}
    <li>
      {i}:
      <b>{name}</b>
    </li>
  {/each}
</ul>

사실 꼭 svetle에서는 id를 사용하지 않아도 된다고 하네요. 그냥 objectf를 집어넣어도 Svelte 내부에서는 map으로 동작하기 때문에 다음과 같은 코드도 정상적으로 작동한다고 합니다.

<ul>
  {#each students as student, i (student)}
    <li>
      {i}:
      <b>{student.name}</b>
    </li>
  {/each}
</ul>

📌 Conclusion

오늘은 이렇게 iteration을 하는 방법에 대해서 알아보았습니다. v-for와 같이 참 편리한거 같아요. 그리고 꼭 unique-string을 key로 사용하는게 아니라 내부적으로 처리해줘서 너무 좋은거 같아요. 그럼 다음 포스팅에서는 async-await blocks 를 svelte에선 어떻게 처리하는지에 대해 알아보겠습니다. 안녕~

📌 Reference

• svelte tutorial