[Svelte] Template Syntax

이번에는 markup 영역에서 조건문, 반복문 등을 사용하는 방법에 대해 살펴보겠습니다.

#if

다음 예제와 함께 조건문의 사용에 대해 살펴봅시다.

<script lang="ts">
  let score = 80;
</script>

<div>
  {#if score >= 90}
    <span>Grade: A</span>
  {:else if score >= 80}
    <span>Grade: B</span>
  {:else}
    <span>Grade: C</span>
  {/if}
</div>

조건문의 경우 아주 간단하죠? 몇 가지 문법적 요소만 기억하시면 쉽게 사용하실 수 있습니다.

#each

이번엔 반복문의 사용에 대해 살펴봅니다.

<script lang="ts">
  let nums = [1, 2, 3];
  let persons = [
    { name: 'Kim', age: 18 },
    { name: 'Lee', age: 23 },
    { name: 'Park', age: 27 }
  ];
  let empty: number[] = [];
</script>

<ul>
  {#each nums as num}
    <li>{num}</li>
  {/each}
</ul>

<ul>
  {#each nums as num, idx}
    <li>{idx}: {num}</li>
  {/each}
</ul>

<ul>
  {#each persons as person (person.name)}
    <li>{person.name}, {person.age}</li>
  {/each}
</ul>

<ul>
  {#each persons as { name, age }}
    <li>{name}, {age}</li>
  {/each}
</ul>

<ul>
  {#each empty as elem}
    <li>{elem}</li>
  {:else}
    <li>Empty</li>
  {/each}
</ul>

반복문의 경우 조금 더 복잡합니다.

첫 번째 부터 살펴보면 기본 문법은 간단히 사용할 수 있습니다.

인덱스를 받을 수도 있고, 인덱스는 0부터 시작합니다.

()를 사용하여 key로 사용할 값을 받을 수 있습니다. Key는 unique한 값이어야 하며, 요소의 구분을 위해 사용됩니다.

다음으로 객체 destructuring을 사용할 수 있습니다.

마지막으로 else 구문을 사용하여, 유효하지 않을 경우의 error 처리를 할 수 있습니다.

#await

이번엔 비동기적 호출에 대해 살펴볼게요.

<script lang="ts">
  let page = 1;
  let limit = 10;

  $: items = fetch(
    `https://jsonplaceholder.typicode.com/posts?_page=${page}&_{limit=${limit}`
  ).then((res) => res.json());

  function nextPage() {
    page += 1;
  }
</script>

<header><div><h1>REST API Page</h1></div></header>
<div><div><span>Page: {page}</span></div></div>
<div>
  {#await items}
    <p>Loading...</p>
  {:then items}
    <ul>
      {#each items as item, idx}
        <li>
          <p>[{item.id}] {item.title}</p>
        </li>
      {/each}
    </ul>
  {:catch err}
    <p>Error!!!</p>
  {/await}
  <a href="#null" on:click={nextPage}>Next Page</a>
</div>

State 값을 기다렸다가 비동기적으로 처리를 합니다.

Promise나 await/async와 동일하니 쉽게 사용하실 수 있을 거에요.

#key

마지막으로 key block에 대해 살펴보겠습니다.

<script lang="ts">
  import { fade } from 'svelte/transition';

  let value = false;

  function changeValue() {
    value = !value;
  }
</script>

{#key value}
  <div transition:fade>{value}</div>
{/key}
<button on:click={changeValue}>Change</button>

Key block에 선언한 expression이 변할 때마다, content를 파괴 후 재생성 합니다.

State value가 변할 때마다, transition을 실행시키거나 할 때 유용하게 사용할 수 있습니다.

또, component에 적용할 경우, 매번 다시 초기화를 합니다.

Wrap Up

이번 포스팅에서는 template syntax들에 대해 살펴보았습니다.

Svelte로 개발 시 정말 많이 사용되는 문법들이니 잘 살펴보세요.