Svelte) Logic Blocks

 

- If (조건부 렌더링)

{#if answer === 42}
	<p>질문은 무엇이었을까요?</p>
{/if}

{#if porridge.temperature > 100}
	<p>너무 뜨거워요!</p>
{:else if 80 > porridge.temperature}
	<p>너무 추워요!</p>
{:else}
	<p>딱 적당해요!</p>
{/if}

 

- Each(배열/객체 순회)

<ul>
{#each items as item}
	<li>{item.name} x {item.qty}</li>
{/each}
</ul>

:  each 블록에 두 번째 인수로 index 전달 (optional)

{#each items as item, i}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

: 두 번째 인수로 key 표현식을 제공하면 데이터 변경 시 리스트를 비교하여 항목을 추가하거나 제거하는 대신에 변경된 항목을 업데이트. key는 고유한 값을 가져야 하며 문자열이나 숫자를 사용하는 것이 좋다.

{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

each 블록은 else 절을 가질 수 있으며 리스트가 비어있을 때 렌더링

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>오늘은 할 일이 없어요!</p>
{/each}

 

- Await(Promise 처리)

: Promise의 세 가지 상태(pending, fulfilled, rejected)에 따라 분기할 수 있다.

: catch 블록은 promise가 거부될 때(또는 오류가 발생하지 않을 경우) 렌더링할 내용이 없는 경우 생략할 수 있다.

<script>
	let arr = []
    const getItems = async() => {
    const url = 'https://ssss'
        
    const res = await fetch(url)
    let data = res.json()
        
    if(res.ok) return data
    else throw new Error('error 발생')
    }

</script>
<button on:click={() => arr = getItems()}>
	아이템 가져오기
</button>
{#await arr}
	<!-- promise가 처리 중인 경우 -->
	<p>promise가 완료될 때까지 기다리는 중...</p>
{:then value}
	<!-- promise가 이행된 경우 -->
	<p>값은 {value}입니다.</p>
{:catch error}
	<!-- promise가 거부된 경우 -->
	<p>오류가 발생했습니다: {error.message}</p>
{/await}

 

: await 블록의 초기 블록을 생략하면 처리 중인 상태를 무시할 수 있다.

{#await promise}
	<!-- promise가 처리 중인 경우 -->
	<p>promise가 완료될 때까지 기다리는 중...</p>
{:then value}
	<!-- promise가 이행된 경우 -->
	<p>값은 {value}입니다.</p>
{/await}

: 대기상태는 생략할 수 있다.

{#await promise then value}
	<p>값은 {value}</p> 
{/await}

 

: 만약 오류 상태만 표시하려면 then 블록을 생략할 수 있다.  

{#await promise catch error}
	<p>오류는 {error}입니다.</p>
{/await}

 

- Key(요소 재생성)

: key 블록은 표현식의 값이 변경될 때마다 해당 내용을 파괴하고 다시 생성한다. 이는 요소가 값이 변경될 때마다 전환 효과(fade)를 재생하도록 할 때 유용하다.

{#key value}
	<div transition:fade>{value}</div>
{/key}

컴포넌트 주위에 key 블록을 사용하면 컴포넌트가 다시 인스턴스화되고 초기화된다.

{#key value}
	<Component />
{/key}

 

 

 

Reference) 위 내용은 Svelte 공식 문서의 내용을 번역한 내용입니다.

Special tags • Docs • Svelte