svelte 번역 - 4 - Template Syntax / Logic blocks

{#if ...} 블록

{#if} 블록은 조건부 렌더링을 위해 사용됩니다. 특정 조건이 충족되면 해당 내용을 렌더링할 수 있습니다.

{#if answer === 42}
  <p>what was the question?</p>
{/if}

추가 조건은 {:else if}와 함께 사용할 수 있으며, 선택적으로 {:else}로 끝날 수 있습니다.

{#if porridge.temperature > 100}
  <p>too hot!</p>
{:else if 80 > porridge.temperature}
  <p>too cold!</p>
{:else}
  <p>just right!</p>
{/if}

{#if} 블록은 요소뿐만 아니라 텍스트를 포함할 수도 있습니다.

---

{#each ...} 블록

{#each} 블록은 값의 리스트를 반복하여 렌더링하는 데 사용됩니다.

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

{#each} 블록은 배열이나 length 속성을 가진 배열과 유사한 값을 반복할 수 있습니다.

배열 인덱스를 얻고 싶다면 두 번째 인자로 지정할 수 있습니다.

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

키 표현식을 제공하면, Svelte는 리스트의 데이터를 변경할 때 각 항목을 고유하게 식별하여 효율적으로 업데이트할 수 있습니다.

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

추가적으로 인덱스 값도 함께 사용할 수 있습니다.

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

구조 분해(destructuring)와 나머지 패턴(rest patterns)도 자유롭게 사용할 수 있습니다.

{#each items as { id, name, qty }, i (id)}
  <li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
  <li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
  <li><span>{id}</span><MyComponent values={rest} /></li>
{/each}

리스트가 비어 있을 때 보여줄 내용을 {:else} 절로 추가할 수 있습니다.

{#each todos as todo}
  <p>{todo.text}</p>
{:else}
  <p>No tasks today!</p>
{/each}

Svelte 4부터는 Map이나 Set과 같은 반복 가능한 객체도 사용할 수 있습니다. 반복 가능한 객체는 정적이어야 하며, 반복 중에 변경되지 않아야 합니다. 성능에 민감한 코드에서는 배열이 더 나은 성능을 제공하므로 가급적이면 배열을 사용하는 것이 좋습니다.

---

{#await ...} 블록

{#await} 블록은 Promise의 세 가지 상태(대기 중, 성공, 실패)에 따라 다른 내용을 렌더링할 수 있습니다.

{#await promise}
  <!-- Promise가 대기 중일 때 -->
  <p>waiting for the promise to resolve...</p>
{:then value}
  <!-- Promise가 성공했을 때 -->
  <p>The value is {value}</p>
{:catch error}
  <!-- Promise가 실패했을 때 -->
  <p>Something went wrong: {error.message}</p>
{/await}

catch 블록이 필요하지 않다면 생략할 수 있습니다.

{#await promise}
  <p>waiting for the promise to resolve...</p>
{:then value}
  <p>The value is {value}</p>
{/await}

대기 상태를 신경 쓰지 않는 경우에는 초기 블록을 생략할 수도 있습니다.

{#await promise then value}
  <p>The value is {value}</p>
{/await}

또한, 오류 상태만 표시하고 싶다면 then 블록을 생략할 수 있습니다.

{#await promise catch error}
  <p>The error is {error}</p>
{/await}

---

{#key ...} 블록

{#key} 블록은 표현식 값이 변경될 때 내용을 삭제하고 다시 생성합니다. 값이 변경될 때 요소에 트랜지션을 적용하고 싶을 때 유용합니다.

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

컴포넌트 주변에 {#key} 블록을 사용할 경우, 컴포넌트가 다시 인스턴스화되고 초기화됩니다.

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

Svelte의 {#if}, {#each}, {#await}, {#key} 블록은 조건부 렌더링, 리스트 반복, 비동기 작업 처리, 값 변경에 따른 콘텐츠 업데이트를 효과적으로 처리할 수 있도록 도와줍니다.