Svelte는 간단하고 직관적인 문법을 제공하여 조건문과 반복문을 사용하기 쉽게 도와줍니다. 아래 예제를 통해 확인해보겠습니다.

조건문 사용하기

Svelte에서 조건문은 {#if}와 {/if} 태그를 사용하여 구현할 수 있습니다. 예를 들어, 다음은 name 변수가 “John”일 경우에만 “안녕하세요, John!”을 출력하는 예제입니다.

<script>
  let name = "John";
</script>

{#if name === "John"}
  <p>안녕하세요, {name}!</p>
{/if}

조건문 안에서 변수를 사용하여 동적인 출력을 할 수도 있습니다. 다음은 age 변수가 18세 이상일 경우에만 “성인 입니다”를 출력하는 예제입니다.

<script>
  let age = 20;
</script>

{#if age >= 18}
  <p>성인 입니다</p>
{/if}

반복문 사용하기

Svelte에서 반복문은 {#each}와 {/each} 태그를 사용하여 구현할 수 있습니다. 예를 들어, 다음은 fruits 배열의 각 요소를 출력하는 예제입니다.

<script>
  let fruits = ['사과', '바나나', '오렌지'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

반복문 안에서는 as 키워드를 사용하여 요소를 정의할 수 있습니다. 위의 예제에서 fruit는 현재 반복되고 있는 요소를 나타냅니다.

Svelte에서는 each 키워드 뒤에 인덱스 값을 지정하여 인덱스를 사용할 수도 있습니다. 다음은 fruits 배열의 각 요소와 해당 인덱스를 출력하는 예제입니다.

<script>
  let fruits = ['사과', '바나나', '오렌지'];
</script>

<ul>
  {#each fruits as fruit, index}
    <li>{index + 1}. {fruit}</li>
  {/each}
</ul>

이와 같이 Svelte에서는 간편한 문법을 제공하여 조건문과 반복문을 사용할 수 있습니다. 자유롭게 활용하여 다양한 UI를 구현해보세요.