Svelte TIL 02

참고

Svelte.js 입문 가이드 - HEROPY

조건문

<!-- [코드 2-1] -->
<script>
  let statement = false
</script>

<button on:click={()=>{statement=true;}}>Show</button>
<button on:click={()=>{statement=false;}}>Hide</button>

{#if statement}
	<h1>Wonjin</h1>
{:else}
	
{/if}

{#if (조건식)} - {:else} - {/if}를 통해 마치 React의 조건부렌더링과 같은 구현을 할 수 있다.

어떤 문을 시작하는 키워드 앞에는 #를 입력한다.
마치는 키워드 앞에는 /를 입력한다.
그 사이의 키워드 앞에는 :를 입력한다.

반복문

<!-- [코드 2-2] -->
<script>
  let brands = ['samsung', 'apple', 'panasonic', 'amd'];
</script>

{#each brands as item}
  <li>{item}</li>
{/each}

{#each (컨테이너) as (원소)} - {/each}를 통해 배열 내의 원소를 하나씩 꺼낼 수 있다.

Event Handler

<!-- [코드 2-3] -->
<script>
  import {onMount} from 'svelte';
  let isEnter = null;
  let isLeave = null;
  let isClicked = false;
	
  const onClick = () => { isClicked = true; }
  const onEnter = () => { isEnter = true; isLeave = false; }
  const onLeave = () => { isLeave = true; isEnter = false; }
	
  onMount(() => {
    const box = document.getElementById('box');
    box.addEventListener('click', onClick);
  })
</script>

<div id="box" 
  on:mouseenter={onEnter}
  on:mouseleave={onLeave}
  style="width=100px; height:100px; background-color:green;"
  >
  <p>isEnter : {isEnter}</p>
  <p>isLeave : {isLeave}</p>
  <p>isClicked : {isClicked}</p>
</div>

바닐라JS와 같이 addEventListener를 통해 어떤 element에 이벤트 핸들러를 달 수 있다. 단, 컴포넌트가 마운트 된 다음에 특정 element를 찾을 수 있으므로 onMount의 callback 안쪽에서 addEventListener를 호출해야 한다.

다른 방법으로, on:click과 같이 directive를 사용해서 이벤트를 추가할 수도 있다.

Component

<!-- [코드 2-4-1] App.svelte-->
<script>
  import Child from './Child.svelte';
  const b = 2;
</script>
<Child a={1} {b} />   

import로 컴포넌트를 불러올 수 있다. 호출하는 App.svelte와 호출당하는Child.svelte는 각각 부모-자식 관계가 형성되었다.
컴포넌트 태그 안쪽으로 Props를 전달할 수 있다. Prop b의 경우 b={b}와 같은 형태가 아닌 {b}만 적혀 있다. Prop이름과 전달하려는 변수의 이름이 같을 때, 만약 그 변수가 단방향바인딩 되어있다면 b=를 생략할 수 있다.

<!-- [코드 2-4-2] Child.svelte-->
<script>
  export let a;
  export let b;
  const sum = a+b;
</script>
<h1>{a} + {b} = {sum}</h1> 

부모로부터 전달받은 Props는 export키워드를 통해 받을 수 있다. 일반적인 용법과는 다르게 스벨트에서는 부모로부터 export되었음을 의미한다.

전달받을 props를 받을 때 <script>태그 안에서는 export const a와 같이 const로 받을 수 없다. <script context="module">안에서는 const로 받을 수 있다.
참고 Svelte - import const from component does not work

Store

// [코드 2-5-1] store.js
import { writable } from 'svelte/store';
export let name = writable('');

store라는 Svelte에 내장된 중앙집중식 데이터 저장소가 존재한다.
writable(초기값) 함수 호출을 통해 외부에서 쓰기가능한 스토어 객체를 만들 수 있다.

<!-- [코드 2-5-2] App.svelte-->
<script>
  import Child from './Child.svelte';
  import { name } from './store.js';
  $name = 'wonjinyi';
</script>
<Child />

<!-- [코드 2-5-3] Child.svelte-->
<script>
  import { name } from './store.js';
</script>
<h1>{$name}</h1>

생성된 스토어 객체는 import { 객체명 } from (스토어 js파일경로)를 통해 가져올 수 있다.
스토어 객체 이름 앞에 $을 붙이면 자동 구독 할 수 있다. 마치 변수인 것 처럼 읽기/쓰기 할 수 있다.