0Pricing
Sveltejs Academy · 강의

인덱스와 키를 사용하는 {#each}

배열과 객체를 순회하며 인덱스와 키 값에 접근합니다.

인덱스와 키를 사용하는 {#each}은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

each 블록

{#each list as item}은 배열을 순회하며 각 요소마다 마크업을 한 번씩 렌더링합니다.

{#each colors as color}
  <li>{color}</li>
{/each}

구조 분해

더 깔끔한 템플릿을 위해 항목의 구조를 인라인에서 구조 분해합니다.

{#each users as { id, name }}
  <li>{name}</li>
{/each}

인덱스 변수

0부터 시작하는 인덱스를 위한 두 번째 바인딩을 추가합니다.

{#each items as item, i}
  <li>{i + 1}. {item}</li>
{/each}

키가 있는 each

항목 뒤에 (item.id)를 키로 제공하면 Svelte가 업데이트 전후의 항목을 일치시킬 수 있습니다.

{#each todos as todo (todo.id)}
  <Todo {todo} />
{/each}

키가 중요한 이유

키가 없으면 항목을 재정렬하거나 필터링할 때 Svelte가 혼동하여 자식 컴포넌트의 상태를 초기화할 수 있습니다. 키를 사용하면 DOM 노드가 안정적으로 유지됩니다.

else 블록

반복 본문 뒤의 {:else}는 목록이 비어 있을 때 렌더링됩니다.

{#each items as item}
  <li>{item}</li>
{:else}
  <li>No items yet.</li>
{/each}

객체 순회하기

객체를 순회하려면 먼저 entries로 변환합니다.

{#each Object.entries(map) as [key, value]}
  <li>{key}: {value}</li>
{/each}

집합과 맵

순회하려면 [...set] 또는 [...map]으로 감쌉니다.

중첩 each

2차원 데이터에는 {#each} 블록을 중첩합니다.

{#each rows as row}
  {#each row as cell}<td>{cell}</td>{/each}
{/each}

닫는 태그

항상 {/each}로 닫습니다. 잘못 배치한 닫는 태그는 컴파일 오류를 일으킵니다.

성능 팁

자주 바뀌는 목록에는 키를 사용합니다. 키를 사용하면 재정렬 비용이 O(n^2)이 아니라 O(n)이 됩니다.

빠른 확인

each에서 (item.id)의 역할은 무엇인가요?

복습

{#each}는 배열을 순회하고 인덱스와 키 바인딩을 지원하며, 비어 있는 상태를 위한 {:else}도 렌더링합니다.

자주 묻는 질문

“인덱스와 키를 사용하는 {#each}” 강의는 무료인가요?

네 — “인덱스와 키를 사용하는 {#each}” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“인덱스와 키를 사용하는 {#each}”에서 뭘 배우나요?

배열과 객체를 순회하며 인덱스와 키 값에 접근합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“인덱스와 키를 사용하는 {#each}” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. {#if} {#else if} {#else}
  2. 인덱스와 키를 사용하는 {#each}
  3. 다시 렌더링을 강제하는 {#key}
  4. 중첩된 {#each}와 키 기반 업데이트
← Sveltejs Academy(으)로 돌아가기