4. Logic

원래 HTML에서 조건문이나 반복문같은 Logic을 표현할 수 없지만, Svelte에서는 가능합니다.

4-1 ~ 4-3. if/Else/Else-if blocks (HTML에서 if문 사용하기)

{#if x > 10}
  <p>{x} is greater than 10</p>
{:else if 5 > x}
  <p>{x} is less than 5</p>
{:else}
  <p>{x} is between 5 and 10</p>
{/if}

1. 위의 예시처럼 {#if 조건}, {:else if 조건}, {:else}, {/if}를 통해 HTML에서 if문을 사용할 수 있습니다.
2. HTML에서 if문을 활용해서 조건부 랜더링을 할 수 있습니다.

4-4. Each blocks (HTML에서 반복문 사용하기)

반복문으로 List의 Data를 보여주고 싶을 때, HTML에서 each block으로 반복문을 사용할 수 있습니다.

<ul>
  {#each cats as cat, i}
    <li>고양이 이름: {cat.name}</li>
    <li>고양이 나이: {cat.age}</li>
  {/each}
</ul>

1. {#each 리스트 as 변수, 인덱스} 이런식으로 반복문을 사용할 수 있습니다.
2. {#each cats as {name, age}} 이런식으로 구조분해할당을 활용해서 사용할 수도 있습니다.

4-5. Keyed each blocks (반복문에 Key 적용하기)

each block에서 반복되고있는 변수를 수정할 때, Svelte는 Default로 block의 맨 뒤에 추가/삭제를 합니다.

// App.svelte
...
let things = [
  {id: 1, name: 'apple'},
  {id: 2, name: 'banana'},
  {id: 3, name: 'carrot'},
  {id: 4, name: 'doughnut'},
  {id: 5, name: 'egg'},  
]
function handleClick(){
  things = thigs.slice(1)
}
...
<button on:click = {handleClick}>
  Remove first thing
</button>
{#each things as thing}
  <Thing name={thing.name} />
{/each}

1. 위처럼 버튼을 클릭하면 things의 맨 앞을 삭제하는 코드를 작성했을 때, each block에서는 맨 앞이 아닌 맨 뒤의 item을 삭제합니다.
2. DOM 노드에서 마지막 <Thing> 컴포넌트를 삭제한 후 name값을 업데이트합니다.
3. 이것을 해결하기 위해서 each block에 key값을 지정하면 어떤 DOM 노드가 수정되어야 할 지 알려주기 때문에 {#each things as thing (thing.id)}처럼 괄호 안에 key값을 지정해주면, 마지막 <Thing>컴포넌트 대신 첫번째 <Thing> 컴포넌트를 삭제해주게 됩니다.

4-6. Await blocks (비동기 데이터 다루기)

await block을 통해 비동기 데이터를 HTML에서 다룰 수 있습니다.

{#await promise}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

1. 위의 예시처럼 {#await}, {:then data변수}, {:catch error변수}, {/await}을 통해 비동기 데이터를 다루고 error를 제어할 수 있습니다.
2. Svelte에서는 최신 Promise만 고려하기 때문에 Race Condition을 걱정할 필요가 없습니다.
3. promise가 reject 되지 않는다면 {#await promise then number} {/await}와 같이 catch block을 생략할 수 있습니다.

튜토리얼 4장 끝

참고문헌

Svelte Tutorial 4장 Logic