[Svelte]반복문 #each

반복 렌더링

배열처럼 순회할 수 있는 항목을 순회하여 각 요소를 HTML 요소에 렌더링 하는 것을 반복 렌더링이라고 말합니다. 예를 들어, 카테고리 항목들이 배열로 구성되어 있는 경우 배열을 순회하여 HTML 요소에 렌더링 할 수 있습니다.

<script>
  const category = [
    {name: '카테고리1'},
    {name: '카테고리2'},
    {name: '카테고리3'}
  ]
</script>

<div>
  <ul>
    {#each category as list}
      <li>{list.name}</li>
    {/each}
  </ul>
</div>

[실행 결과]

Svelte에서 반복문은 {#each  배열 as 요소}로 시작하며 {/each}로 끝납니다.

 

이번 포스팅을 통해 Svelte에서 반복문을 사용하는 다양한 예제들을 알아보겠습니다.

---

Svelte의 반복문

Svelte에서 반복문을 시작하려면 #{each}를 사용하고 반복문을 종료하려면 {/each}를 사용합니다.  {#each}문은 JavaScript의 for..in 루프와 유사한 as 루프를 사용합니다.

{#each list as alias}
  <-- list의 요소를 렌더링 -->
{/each}

{#each} 문에서 list는 배열처럼 반복할 수 있는 항목이며 alias는 반복문의 현재 요소를 참조하는 별칭입니다. list는 script 영역에서 정의된 변수의 이름과 동일해야 하지만 alias는 원하는 대로 이름을 지정할 수 있습니다.

 

다음 예제는 string 타입의 배열을 순회하여 각 요소를 HTML 영역에 출력합니다.

<script>
  const li = ['One', 'Two', 'Three'];
</script>

<div>
  {#each li as item}
    <p>{item}</p>
  {/each}
</div>

[실행 결과]

---

예제 1. 인덱스 가져오기

{#each}문에서 배열의 인덱스를 가져와야 하는 경우 별칭(alias) 뒤에 쉼표를 추가하고 별칭과 인덱스를 구분합니다. 인덱스는 별칭과 마찬가지로 원하는 대로 이름을 지을 수 있습니다.

{#each list as alias, index}
  <-- list의 요소를 렌더링 -->
{/each}

다음 예제는 string 타입의 배열을 순회하여 인덱스와 각 요소를 HTML 영역에 출력합니다.

<script>
  const li = ['One', 'Two', 'Three'];
</script>

<div>
  {#each li as item, index}
    <p>{index}. {item}</p>
  {/each}
</div>

[실행 결과]

---

예제 2. 객체로 구성된 배열을 반복

배열의 각 요소가 객체인 경우 대괄호 표기법 또느 점 표기법을 사용하여 프로퍼티를 접근할 수 있습니다. 다음 예제는 객체로 구성된 배열을 순회하여 객체의 프로퍼티를 HTML 요소에 렌더링 합니다.

<script>
  const list = [
    {name: 'Bob',  age: 20},
    {name: 'Tim',  age: 25},
    {name: 'Nick', age: 30},
    {name: 'Yarn', age: 40}
  ];
</script>

<div>
  {#each list as item, idx}
    <p>{idx}. name: {item.name}, age: {item['age']}</p>
  {/each}
</div>

---

예제 3. key 표현식

Svelte는 React처럼 HTML 요소를 순회하여 렌더링 하는 경우 key 속성을 사용할 수 있습니다. key를 사용하면 순회하여 추가되는 HTML 요소에 고유한 ID를 부여하여 DOM 업데이트를 최적화합니다.

 

#each문 끝에 소괄호를 추가하고 소괄호 내부에 키를 작성합니다.

{#each list as alias, index (unique_key)}
  <!-- elements to render -->
{/each}

다음 예제는 배열의 인덱스를 키로 사용합니다.

<script>
  const list = [
    {name: 'Bob',  age: 20},
    {name: 'Bob',  age: 20},
    {name: 'Tim',  age: 25},
    {name: 'Nick', age: 30}
  ];
</script>

<div>
  {#each list as item, idx (idx)}
    <p>{idx}. name: {item.name}, age: {item['age']}</p>
  {/each}
</div>

[실행 결과]

{#each} 문에서 key는 중복되는 값을 가질 수 없으며 반드시 고유한 값으로 설정되어야 합니다. 만약, 다음 예제처럼 key가 중복되는 경우 에러는 발생하지 않으나 정상적으로 렌더링 되지 않는 문제가 발생합니다.

<script>
  const list = [
    {name: 'Bob',  age: 20},
    {name: 'Bob',  age: 20},
    {name: 'Tim',  age: 25},
    {name: 'Nick', age: 30}
  ];
</script>

<div>
  {#each list as item, idx (item.name)}
    <p>{idx}. name: {item.name}, age: {item['age']}</p>
  {/each}
</div>