Svelte - Logic

📌 목록

• Introduction
• Logic - if
• Logic - else
• Logic - else if
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 svelte에서 어떻게 if, else if, else 같은 것들을 어떻게 처리하는지에 대해서 한번 알아보겠습니다.

📌 Logic - if

먼저 간단하게 if에 대해서 알아보겠습니다.

아래와 같은 방식으로 선언을 할수 있어요.

{#if}
{/if}

그럼 이제 한번 간단하게 count가 짝수 일때 count is even이라는 문구를 출력해보도록 하겠습니다.

<script>
  let count = 0;

  const onClickPlus = () => {
    count++;
  };
</script>

<h1>COUNT: {count}</h1>
{#if count % 2 === 0}
  <div>count is even</div>
{/if}

<button on:click={onClickPlus}>PLUS</button

📌 Logic - else

그럼 이제 else에 대해서 한번 알아보곘습니다.

기본적인 문법은 이렇습니다.

{#if}
{:else}⭐️
{/if}

<script>
  let count = 0;

  const onClickPlus = () => {
    count++;
  };
</script>

<h1>COUNT: {count}</h1>
{#if count % 2 === 0}
  <div>count is even</div>
{:else}
  <div>count is odd</div>
{/if}

<button on:click={onClickPlus}>PLUS</button>

📌 Logic - else if

else if 도 비교적 쉬워요

{#if}
{:else if} ⭐️
{:else}
{/if}

그럼 이제 한번 사용해볼까요?

<script>
  let count = 0;

  const onClickPlus = () => {
    count++;
  };
</script>

<h1>COUNT: {count}</h1>
{#if count === 0}
  <div>count is zero</div>
{:else if count % 2}
  <div>count is odd</div>
{:else}
  <div>count is even</div>
{/if}

<button on:click={onClickPlus}>PLUS</button>

📌 Conclusion

vue의 v-if나 v-else-if와 같은 것들을 비슷하게 따온거 같아서 너무 기분이 좋은거 같아요. react적으로 풀어낼수도 있었겠지만 vue처럼 뭔가 좀더 직관적인 키워드가 있어 가독성도 좀더 좋아진거 같습니다. 그럼 다음 시간에는 이제 v-for와 같은 것에 대해서 한번 알아볼게요. 그럼 안녕!

📌 Reference

• svelte tutorial