4.3 {#each ...}를 사용해 배열 표시하기
#each 블록은 배열 형태의 데이터를 사용해, 배열의 길이만큼 루프를 돌면서 #each 블록 안의 콘텐츠를 돔에 렌더링합니다.
each 사용 문법
{#each 배열 as 아이템, 인덱스}
<!-- 표현하고자 하는 콘텐츠 -->
{/each}
형태로 사용합니다.
문법 이해를 위해서 REPL에서 간단한 예제를 작성해보겠습니다. svelte.dev 웹 사이트에서 REPL의 App.svelte를 열고 다음과 같이 작성합니다.
REPL의 App.svelte, each를 사용해 블록 안의 내용 반복 출력하기
<script>
let colors = ["빨강", "노랑", "파랑", "보라"]; // 반복 출력할 배열
</script>
<main>
<ul>
<!-- 배열의 요소 개수만큼 반복 실행 -->
{#each colors as color}
<li>{color}</li> <!-- 배열의 요소를 li로 출력 -->
{/each}
</ul>
</main>