[Svelte]스벨트에서 반복문 사용하는 방법

지난 포스팅에서는 Svelte에서 반복문을 수행할 수 있는 {#each} 문에 대해 알아보았습니다.

[Svelte]반복문 #each

이번 포스팅에서는 스벨트에서 반복문을 수행하는 몇 가지 팁을 소개합니다.

---

예제 1. 객체로 구성된 배열

가장 기본적인 방법부터 소개하겠습니다. 배열의 요소가 객체로 구성된 경우 점 표기법 또는 대괄호 표기법으로 객체의 프로퍼티를 접근할 수 있으며, 별칭 뒤에 쉼표를 추가하여 인덱스를 추출할 수 있습니다.

<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}
    <p>index: {idx}. name: {item.name}, age: {item['age']}</p>
  {/each}
</div>

[실행 결과]

위 예제에서 idx라는 별칭을 사용하여 인덱스를 가져옵니다. 그리고 name이라는 프로퍼티는 점 표기법을 사용하여 접근하였으며, age라는 프로퍼티는 대괄호 표기법으로 접근하였습니다.

---

예제 2. 고유한 값이 있는 객체로 구성된 배열

고유한 값을 가지고 있는 프로퍼티가 있다면 key로 사용할 수 있습니다. 배열을 순회하여 추가되는 HTML 요소에 key 속성을 부여하여 DOM 업데이트를 최적화할 수 있습니다.

 

다음 예제는 id라는 프로퍼티를 key로 설정합니다.

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

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

---

예제 3. 구조 분해 할당

배열의 요소에서 원하는 프로퍼티만 추출하고 싶은 경우 별칭(alias)에 구조 분해 할당을 사용할 수 있습니다. 다음 예제에서 id프로퍼티는 key로 설정하고 name프로퍼티는 HTML 요소에 출력되고 age프로퍼티는 사용되지 않습니다.

 

따라서, 구조 분해 할당을 활용하여 id, name 프로퍼티만 추출합니다.

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

<div>
  {#each list as {id, name}, idx (id)}
    <p>index: {idx}. name: {name}</p>
  {/each}
</div>

---

예제 4. 객체의 키-값

이번에는 배열이 아닌 객체의 키와 값을 접근하는 경우입니다. 최상위 객체인 Object에 존재하는 entries() 함수를 사용하여 객체의 키-값 쌍을 추출하여 객체의 키와 값을 접근할 수 있습니다.

<script>
  const person = {
    id: '100',
    name: 'Bob',
    age: 20,
    address: 'Seoul'
  };
</script>

<div>
  {#each Object.entries(person) as [key, value], idx (key)}
    <p>{key}: {value}</p>
  {/each}
</div>

[실행 결과]

---

예제 5. 특정 횟수만큼 반복

HTML 요소를 특정 횟수만큼 표시하려는 경우 Array()에 특정 횟수를 전달합니다.

<div>
  {#each Array(5) as _, idx}
    <p>Hi</p>
  {/each}
</div>

배열의 모든 요소는 undefined이므로 배열의 요소는 신경 쓰지 않습니다. 따라서, 배열의 요소의 별칭은 언더바(_)로 설정합니다.

[JavaScript]언더바 변수