[Svelte]if 조건문

조건부 렌더링

React, Svelete, Angular 등 특정 조건에 따라 HTML 요소를 표시하거나 표시하지 않아야 하는 경우가 있습니다. 특정 조건에 따라 HTML 요소를 표시하는 것을 조건부 렌더링이라고 말하며 Svelte에서도 조건문 블록을 사용하여 조건부 렌더링을 구현할 수 있습니다.

{#if num === 0}
  <div>num은 0입니다.</div>
{:else if num < 0}
  <div>num은 0보다 작습니다.</div>
{:else}
  <div>num은 0보다 큽니다.</div>
{/if}

---

if문

Svelte에서 조건문은 {#if 조건문}으로 시작하며 {/if}로 끝납니다. 다른 프로그래밍 언어와 유사하게 동작합니다.

{#if 조건문}
  <!-- HTML 요소 -->
{/if}

다음 예제는 num이 0인 경우 "num은 0입니다."라는 문구가 HTML 영역에 렌더링 되고 0이 아닌 경우 렌더링 되지 않습니다.

<script>
  let num = 0;
</script>

<div>
  <h1>{num}</h1>
  <button on:click={() => {num++;}}>+</button>
  <button on:click={() => {num--;}}>-</button>

  {#if num === 0}
    <div>num은 0입니다.</div>
  {/if}
</div>

[실행 결과]

조건문에는 자바스크립트 표현식이라면 무엇이든 사용할 수 있습니다. 따라서, 동등 연산자 및 동치 연산자뿐만 아니라 다음과 같이 삼항 연산자도 사용할 수 있습니다.

{#if num === 0 ? true : false}
<div>num은 0입니다.</div>
{/if}

그리고 HTML영역에는 여러 개의 if문을 작성할 수 있습니다.

<script>
  let num = 0;
</script>

<div>
  <h1>{num}</h1>
  <button on:click={() => {num++;}}>+</button>
  <button on:click={() => {num--;}}>-</button>

  {#if num === 0}
    <div>num은 0입니다.</div>
  {/if}

  {#if num === 1}
    <div>num은 1입니다.</div>
  {/if}

  {#if num === 2}
    <div>num은 2입니다.</div>
  {/if}
</div>

[실행 결과]

---

else if문

if블록에 대해 조건문이 여러 개인 경우 {:else if 조건문}문을 사용할 수 있습니다. 다음 예제는 num의 값이 0, 1, 2인 경우 렌더링 되는 HTML요소가 다릅니다.

<script>
  let num = 0;
</script>

<div>
  <h1>{num}</h1>
  <button on:click={() => {num++;}}>+</button>
  <button on:click={() => {num--;}}>-</button>

  {#if num === 0}
    <div>num은 0입니다.</div>
  {:else if num === 1}
    <div>num은 1입니다.</div>
  {:else if num === 2}
    <div>num은 2입니다.</div>
  {/if}
</div>

---

else문

{:else}문은 {#if 조건문} 또는 {:else if 조건문}의 조건문을 만족하지 않는 경우에 대해 렌더링 되어야 하는 HTML 요소를 작성합니다. 다음 예제는 num의 값이 0, 1, 2가 아닌 경우 {:else} 블록에 작성된 HTML 요소를 렌더링 합니다.

<script>
  let num = 0;
</script>

<div>
  <h1>{num}</h1>
  <button on:click={() => {num++;}}>+</button>
  <button on:click={() => {num--;}}>-</button>

  {#if num === 0}
    <div>num은 0입니다.</div>
  {:else if num === 1}
    <div>num은 1입니다.</div>
  {:else if num === 2}
    <div>num은 2입니다.</div>
  {:else} 
    <div>num은 0, 1, 2가 아닙니다.</div>
  {/if}
</div>