4.4 {#each} 루프 안에서 인덱스 사용하기
그리고 each는 다음 코드처럼 인덱스를 사용해 순번을 표현할 수 있습니다.
REPL의 App.svelte, each에서 인덱스 사용 예
<script>
let colors = ["빨강", "노랑", "파랑", "보라"]; // 반복 출력할 배열
</script>
<main>
<ul>
<!-- 배열의 요소 개수만큼 반복 실행 -->
{#each colors as color, idx} <!-- 반복 횟수 변수 idx 선언 -->
<li>{idx}: {color}</li> <!-- 배열의 요소를 li로 출력 -->
{/each}
</ul>
</main>
#each 표현식 안에 idx가 예약어는 아닙니다. i나 j 같은 이름을 써도 좋습니다. idx는 colors가 루프를 돌 때마다 1씩 증가합니다. 시작은 0입니다.
▲ 그림 4-5 인덱스 넣기