원래 HTML에서 조건문이나 반복문같은 Logic을 표현할 수 없지만, Svelte에서는 가능합니다.
{#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}
{#if 조건}
, {:else if 조건}
, {:else}
, {/if}
를 통해 HTML에서 if문을 사용할 수 있습니다.반복문으로 List의 Data를 보여주고 싶을 때, HTML에서 each
block으로 반복문을 사용할 수 있습니다.
<ul>
{#each cats as cat, i}
<li>고양이 이름: {cat.name}</li>
<li>고양이 나이: {cat.age}</li>
{/each}
</ul>
{#each 리스트 as 변수, 인덱스}
이런식으로 반복문을 사용할 수 있습니다.{#each cats as {name, age}}
이런식으로 구조분해할당을 활용해서 사용할 수도 있습니다.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}
each
block에서는 맨 앞이 아닌 맨 뒤의 item을 삭제합니다.<Thing>
컴포넌트를 삭제한 후 name
값을 업데이트합니다.each
block에 key값을 지정하면 어떤 DOM 노드가 수정되어야 할 지 알려주기 때문에 {#each things as thing (thing.id)}
처럼 괄호 안에 key값을 지정해주면, 마지막 <Thing>
컴포넌트 대신 첫번째 <Thing>
컴포넌트를 삭제해주게 됩니다.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}
{#await}
, {:then data변수}
, {:catch error변수}
, {/await}
을 통해 비동기 데이터를 다루고 error를 제어할 수 있습니다.{#await promise then number}
{/await}
와 같이 catch
block을 생략할 수 있습니다.