Svelte

Svelte - Iteration

eddie0329 2020. 12. 26. 23:47
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ๋ก

  • 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

๋ฐ˜์‘ํ˜•