[Svelte 시리즈] 데이터 바인딩, 조건문, 반복문, 이벤트 핸들링

[Svelte 시리즈] 데이터 바인딩, 조건문, 반복문, 이벤트 핸들링

이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.

데이터 단/양방향 바인딩

Svelte는 기본적으로 단방향 데이터 바인딩이다.

아래 예제에서 input에 name을 바인딩 했지만, 값을 변경한다고 name 변수의 값은 바뀌지 않는다.

<script>
let name = 'world';
</script>

<h1>Hello {name}</h1>
<input type="text" value={name} />

양방향 바인딩을 하려면 bind 키워드를 사용해 아래와 같이 작성해주면 된다.

<script>
let name = 'world';
</script>

<h1>Hello {name}</h1>
<input type="text" bind:value={name} />

조건문

마크업 영역에서 조건문을 사용할 수 있다.

{#if 조건} 조건문 내용 {/if} 와 같이 조건문 영역을 잡을 수 있다.

{:else}, {:else if 조건} 를 통해 else / else if 구문을 작성할 수 있다.

Svelte의 대부분 구문은 시작할 때 #, 중간단계는 :, 종료단계는 /인 것이 대부분이다.

<script>
let toggle = false;
</script>

{#if toggle}
    <h1>Hello {name}</h1>
{:else}
    <div>No name!</div>
{/if}

반복문

가장 기본적으로 for each 문은 {:each array as item} 반복문 내용 {/each} 으로 작성할 수 있다.

array는 배열 변수이며 as 뒤에는 반복문 내용에서 접근할 각 배열의 원소에 대한 이름을 지정한 것이다.

<script>
    let fruits = ['Apple', 'Banana', 'Cherry', 'Orange', 'Mango'];
</script>

<ul>
{#each fruits as fruit}
    <li>{fruit}</li>
{/each}
</ul>

참고할 점은 Svelte는 기본적으로 단방향이기 때문에 아래와 같은 코드는 fruits가 변경되더라도 화면 랜더링에는 변화가 없다. 화면 랜더링에 변화를 주려면 fruits를 변경한 후 다시 재할당 해주어야한다.

이벤트 핸들링

아래 예제는 box 클래스로 지정된 div를 클릭하면 배경색이 변경되도록 작성한 예시이다.

svelte에서 import한 onMount 함수는 document.ready와 같이 화면쪽 컴포넌트 들이 모두 구성이 완료된 후 실행될 콜백을 세팅해둘수 있는 함수이다.

<script>
    import { onMount } from 'svelte';
    let isRed = false;
    onMount(() => {
         const box = document.querySelector('.box');
         box.addEventListener('click', () => { isRed = !isRed });    
    });    
</script>

<div class="box" 
     style="background-color: {isRed ? 'red' : 'orange'}">
</div>

<style>
    .box {
        width: 300px;
        height: 150px;
        background-color: orange;
    }
</style>

svelte에서 제공해주는 방식대로 이벤트를 추가하려면 아래와 같이 할 수 있다.

on:이벤트명 과 함수를 전달하면 된다.

<script>
    let isRed = false;
</script>

<div class="box" 
     style="background-color: {isRed ? 'red' : 'orange'}"
     on:click={() => isRed = !isRed}>
</div>

<style>
    .box {
        width: 300px;
        height: 150px;
        background-color: orange;
    }
</style>

한 가지 예시를 더보자.

아래 예시는 input 태그에 input 이벤트 발생 시 해당 텍스트를 text 변수에 할당해주는 이벤트를 걸어두고

버튼 클릭 시 text변수를 ‘clicked!’ 로 변경해주는 이벤트를 걸어둔 예시이다.

<script>
    let text = '';
</script>

<h1>
    {text}
</h1>
<input type="text" 
       on:input={(e) => {text = e.target.value}} />
<button on:click={() => {text = 'clicked!'}}>
    Change Text
</button>

위 예시는 input의 값을 변경하면 값이 h1 태그 통해 출력되는 text 변수 값이 바뀌는 것을 볼 수 있다.

하지만 버튼을 클릭하면 h1 통해 출력되는 값은 바뀌지만, input 태크에 입력되어있는 값은 바뀌지 않는다.

그 이유는 위 input 태그에 값을 바인딩을 해두지 않아서이다.

아래와 같이 input 태그에 value로 값을 바인딩해주면 버튼 클릭으로도 input 태그 값이 바뀌는 것을 확인할 수 있다.

<script>
    let text = '';
</script>

<h1>
    {text}
</h1>
<input type="text" 
       on:input={(e) => {text = e.target.value}} 
       value={text}/>
<button on:click={() => {text = 'clicked!'}}>
    Change Text
</button>

이러한 방법은 양방향 바인딩으로도 해결해줄수 있다.

<input type="text" bind:value={text} /> 라고 bind 키워드를 사용해 양방향 바인딩을 해주는 것이 위와 똑같은 역할을 해주고 있는 것이다.