더북(TheBook)

단순히 ul의 하위 엘리먼트 li를 반복적으로 표현하는 것도 좋지만, 실제 많이 쓰일 select 박스 예를 한 개 더 작성해볼까요?

REPL의 App.svelte, each를 활용한 select box 예
<script>
    let colors = ["빨강", "노랑", "파랑", "보라"]; // 반복 출력할 배열
</script>

<main>
    <select>
        <option> 선택하세요 </option>
        {#each colors as color, idx } <!-- 배열의 요소 개수만큼 option 출력 -->
            <option> {idx + 1}: {color} </option> <!-- option의 콘텐츠로 idx 활용 -->
        {/each}
    </select>
    <ul>
        <!-- 배열의 요소 개수만큼 반복 실행 -->
        {#each colors as color, idx}  <!-- 반복 횟수 변수 idx 선언 -->
            <li>{idx}: {color}</li>   <!-- 배열의 요소를 li로 출력 -->
        {/each}
    </ul>
</main>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.