[Svelte] 논리문법 if , else, if else 블록

if 블록

우리가 일반적으로 알고 있는 if문의 문법과 비슷하다.

Header폴더 하위에 IsLoggedIn 컴포넌트를 작성하자.

<!--./src/Component/Header/IsLoggedIn.svelte-->
<script>
  let isLoggedIn = false;
  function loginLogout() {
    isLoggedIn = !isLoggedIn;
  }
</script>
<div>
  {#if !isLoggedIn}
    <h2>로그인을 해주세요.</h2>
    <button on:click={loginLogout}>로그인</button>
  {/if}
  {#if isLoggedIn}
    <h2>로그인됐습니다.</h2>
    <button on:click={loginLogout}>로그아웃</button>
  {/if}
</div>

<!--./src/Component/Header/Header.svelte-->
<script>
  import IsLoggedIn from './IsLoggedIn.svelte';
</script>

<nav>
  <a href="#/">Home</a>
  <a href="#/Contact1">Contact1</a>
  <a href="#/Contact2/1234">Contact2</a>
</nav>
<IsLoggedIn />

<style>
  a {
    text-decoration: none !important;
  }
</style>

이전 포스팅과 비슷한 느낌도 있지만, 명확한 차이는 이전 포스팅은 변수(state)의 변경을 감지해서 변경된 변수를 보여주는 형식이라면, 이번 포스팅은 변수(isLoggedIn)이 참인지 거짓인지를 통해서 html 자체를 다르게 보여주는 방식이다.

 

else 블록

<!--./src/Component/Header/IsLoggedIn.svelte-->
<script>
  let isLoggedIn = false;
  function loginLogout() {
    isLoggedIn = !isLoggedIn;
  }
</script>

<div>
  {#if !isLoggedIn}
    <h2>로그인을 해주세요.</h2>
    <button on:click={loginLogout}>로그인</button>
  {:else}
    <h2>로그인됐습니다.</h2>
    <button on:click={loginLogout}>로그아웃</button>
  {/if}
</div>

if만 사용할때와 다른점은 else에서는 "#"이 아닌 ":" 를 쓴다.

else if 블록

if, else if와 else까지 총 세가지 상황을 만들어 보겠다.

이전 포스팅 에서 만들 더하기 빼기함수를 사용하겠다.

<!--./src/Component/Home/Home.svelte-->
<h1>Home</h1>
<div class="numbers-container">
  <div class="number-container">
    <h2>number : {number}</h2>

    <button on:click={plusNumber}>Plus</button>
    <button on:click={minusNumber}>Minus</button>
  </div>
  <div class="number-container">
    <h2>number2 : {number2}</h2>
    <button on:click={plusNumber2}>Plus</button>
    <button on:click={minusNumber2}>Minus</button>
  </div>
  <!-- 시작은 "3" -->
  {#if sum < 5}
    <div class="number-container">
      <h2>sum : {sum}은 5보다 작습니다</h2>
    </div>
    <!-- 중간은 ":" -->
  {:else if sum >= 5 && sum < 10}
    <div class="number-container">
      <h2>sum : {sum}은 4보다 크고 10보다 작습니다</h2>
    </div>
    <!-- 끝은 "/" -->
  {:else}
    <div class="number-container">
      <h2>sum : {sum}은 9보다 큽니다</h2>
    </div>
  {/if}
</div>

 

if문에 따라서 html이 렌더링된다.

 

if문 이외에도 each 블록, await 블록이 있으며, 모든 블록은 시작은 "#"으로 중간은 ":", 끝은 "/"이다.

 

개인 기록용입니다. 만약 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!