if-else 논리가 Svelte에서 작동하는 방식

Vue 및 React와 같은 다른 최신 프레임워크와 마찬가지로 Svelte는 구성 요소 자체 내에서 논리를 허용합니다. 이 기사에서는 Javascript 외부의 Svelte에서 if 및 else 문 논리가 작동하는 방식을 살펴보겠습니다. Svelte를 처음 사용하는 경우 첫 번째 Svelte 애플리케이션 생성에 대한 가이드부터 시작하세요.

Svelte에서 if-else 문 사용

새로운 컴포넌트를 생성해봅시다. ./src/components의 Svelte 프로젝트에서 Component.svelte라는 새 파일을 만듭니다. 해당 구성 요소 내부에 다음 코드를 추가합니다.

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    export let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{x}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

이 간단한 구성 요소는 클릭할 때마다 값에 1을 추가하는 카운터를 만듭니다. 이 예에서 인라인 논리를 사용하는 방법을 살펴보겠습니다.

Svelte의 If 문 논리

Svelte의 논리는 {} 중괄호 안에 들어갑니다. 위 구성 요소의 x 값을 기반으로 메시지를 표시하고 싶다고 가정합니다. 우리의 논리는 다음과 같아야 합니다.

값이 5보다 크고 10보다 작은 경우 "5회 이상 클릭!"을 표시합니다.

값이 10보다 크면 "와우 정말 많은 클릭이네요!"라고 표시됩니다.

그렇지 않으면 "계속 클릭!"을 표시합니다.

Svelte에서 해당 구문은 다음과 같습니다.

<script>
    export let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

{#if x <= 10 && x > 5}
    <h2>more than 5 clicks!</h2>
{:else if x > 10}
    <h2>wow that's a lot of clicks!</h2>
{:else} 
    <h2>keep clicking!</h2>
{/if}

<button id="counter" on:click="{addToCounter}">{x}</button>

즉, 표시할 제목을 작성하기 위해 Javascript 기능에 의존할 필요가 없습니다. 대신 Svelte 구성 요소에 직접 작성할 수 있습니다.

Svelte의 if-else 문

이전과 유사하게 if와 else만 원하는 경우에도 그렇게 할 수 있습니다.

{#if x <= 10 && x > 5}
    <h2>more than 5 clicks!</h2>
{:else} 
    <h2>keep clicking!</h2>
{/if}

마지막으로 if 문만으로도 작동합니다. Javascript 값을 기반으로 DOM 요소를 숨기거나 표시하는 데 적합합니다.

{#if x <= 10 && x > 5}
    <h2>more than 5 clicks!</h2>
{/if}

Svelte의 if-else 문의 구조

if 문의 첫 번째 부분은 항상 {#if STATEMENT}로 시작합니다. 여기서 STATEMENT는 테스트할 논리적 Javascript 문입니다.

else if 또는 else를 계속 사용하면 {:else if STATEMENT} 및 {:else} - # 대신 :을 사용하여 작성됩니다.

{/if} 로 모든 논리문을 마무리합니다.