여기에 Svelte에서 조건부 렌더링을 사용하는 간단한 예제가 있습니다.

<script>
  let showComponent = true;
</script>

{#if showComponent}
  <Component />
{:else}
  <p>컴포넌트를 숨깁니다.</p>
{/if}

위의 예제에서 showComponent 변수가 true로 설정되어 있으면 <Component />가 화면에 표시됩니다. 만약 showComponent가 false로 설정되어 있다면, “컴포넌트를 숨깁니다.”라는 텍스트가 화면에 표시됩니다.

if 블록을 사용하여 특정 조건에 따라 컴포넌트를 렌더링할 수 있고, else 블록을 사용하여 조건이 거짓인 경우에 대한 대체 콘텐츠를 제공할 수 있습니다.

또한, each 블록을 사용하여 배열을 순회하면서 동적으로 컴포넌트를 렌더링하는 것도 가능합니다. each 블록은 if 블록과 함께 사용할 수도 있습니다.

<script>
  let items = ['Apple', 'Banana', 'Orange'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

위의 예제에서 items 배열에 포함된 각 요소들이 <li> 태그로 렌더링됩니다.

조건부 렌더링은 Svelte에서 가장 자주 사용되는 기능 중 하나이며, 컴포넌트의 상태나 외부 입력을 기반으로 화면에 표시할 내용을 결정할 때 유용합니다.