Svelte 훓어보기

개요

svelte 기본 문법 사용 학습. qt도 ㅄ이 아니었으므로 svelte도 슈벌탱이 아니길빌며.

프로젝트 초기 설정

svelte에서 제공하는 template을 사용하자.

npx degit sveltejs/template mynewproject
npm install
npm run dev

상태의 표시와 갱신

상태는 스크립트 내에 선언하고 html내에서 {}로 불러서 쓴다. 상태 변화는 할당(assigment operation) 기준으로 판단하고 화면을 새로 그린다.

<script>
  let count = 0;        //상태 선언!

  function addCount() {
    count = count + 1;  //할당!
  }
</script>

<button on:click={addCount} > add </button>
<p>current Count is : {count}</p>

이벤트 핸들러

on:뒤에 이벤트를 넣는다. 예를 들어 버튼에 클릭 이벤트를 넣고 싶으면 on:click

onclick을 바로 바르지 말자.

<button on:click={functionName}>여기 클릭!</button>

<script>
  let lastPosition = {x:0, y:0}
  function handleMove(event) {
    lastPosition.x = event.clientX;
    lastPosition.y = event.clientY;
  }
</script>

<div on:mousemove={handlerMove}>
  Current Position is ({lastPosition.x}, {lastPosition.y})
</div>

modifier

on:eventname뒤에 파이프(|)를 붙여서 modifier를 추가할 수 있다. 이벤트의 성격을 지정한다.

<button on:click|once={functionName}>한번만 실행됨</button>

eventdispatcher

eventdispatcher를 이용하여 이벤트 전송 가능 on:message(수신할 메세지 명) 디렉티브를 이용하여 dispatch한 메세지를 수신

<script type="text/javascript">
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher(); //꼭 컴포넌트 이니셜 타이밍에 콜 필요. settimeout등으로 나중에 부르면 안됨

fuction dispatchMessage(){
  dispatch('message', {text:'hello!'});
}

</script>

<button on:click={dispatchMessage}>
send Message
</button>



<script>
import Inner from './inner.svelte';


function listenMessage(){
  alert(event.detail.text);
}
</script>

<!-- inner에서 on:click으로 메세지를 파이어하면, on:message에서 메세지 받음 -->
<Inner on:message={listenMessage} />

이벤트 포워드

이벤트를 처리하지 않는다고 버블(자동으로 상위로 던지지)하지 않음. 상위로 이벤트를 던져주려면 현재 컴포넌트에서 이벤트를 받아서 동일 메세지를 다시 던져야함

ex) Inner에서 받은 메세지를 forwardEvent에서 받아서 다시 dispatch해줌


<script>
    import Inner from './Inner.svelte';
    import { createEventDispatcher } from 'svelte';
    
    const dispatcher = createEventDispatcher();
    
    function forwardEvent(event) {
        dispatcher('message', event.detail);    
    }
</script>

<Inner on:message={forwardEvent}/>

돔이벤트도 마찬가지로 던져줘야함 아래에서 CustomButton의 button에서 on:click을 명시적으로 dispatch하지 않으면 이벤트를 먹음. 처리하지 않을거면 명확하게 on:click을 포워딩 해야함.

//in CustomButton.svelt
<button on:click> 
    Click me
</button>

//in App.svelte
<script>
    import CustomButton from './CustomButton.svelte';

    function handleClick() {
        alert('Button Clicked');
    }
</script>

<CustomButton on:click={handleClick}/>

제어문 : if, elseif, else

{#if 조건}로 시작하여 {/if}로 끝나고 사이에 {:else if 조건}{:else}를 넣는다.

# - block opening tag
: - block continuation tag
/ - block closing tag

예제: 이하니면 이하니, 아니면 이한위라고 출력. 중간에 함정도 하나씩..


<script>
let ishany = true;
let count = 0;

function changeName(){
  ishany = !ishany;
  ++count;
}
</script>

<button on:click={changeName}> Change </button>
<p>
{#if ishany}
이하늬다! 이하늬다!
{:else if count % 3 == 0}
함정!
{:else}
이한위다...
{/if}
</p>

제어문 : each

대략 for문. {#each list as item} ,,,로직로직,,, {/each} 블록으로 구성

{#each hotguylist as hotguy} <p>{hotguy.name} is hot</p> {/each}

인덱스를 넣고 싶을 경우 {#each list as item, i}형태의 문법 가능

{#each hotguylist as hotguy, i} <p>{i+1}. {hotguy.name} is hot</p> {/each}

array 수정시 정확한 item 갱신

list에서 특정 아이템을 넣고 뺄 경우가 있다. 이때 list만 갱신하고 갱신하면 list값은 갱신이 되나 화면단의 목록은 전체 갱신이 되지 않는다. 이를 위하여 each란의 각 아이템에 key(or unique identifier)를 부여하여 개별 item 수정이 DOM에 잘 반영될 수 있도록 한다. {#each [list] as [item] ([key])}

<script>
  function handleClick() {
    hotguylist = hotguylist.slice(1);
  }
</script>

<button on:click={handleClick}>remove first item</button>

{#each hotguylist as hotguy, i (thing.id)}
  <p>{i+1}. {hotguy.name} is hot</p>
{/each}

promise

비동기 promise 명령

fetch : request async : async function. 비동기 펑션이라는 어노테이션 await : 비동기 펑션을 돌리고 해당 위치에서 기다림(!).


<script>

async function asyncFunction() {
  const res = await fetch('sourcepath');
  const text = await res.text();

  if(res.ok) {
    return text;
  } else {
    throw new Erorr(text);
  }
}

let promise = asyncFunction();
</script>


{#await promise}
<p>기본 상태. pending</p>
{:then number}
<p>정상 종료</p>
{:catch error}
<p>에러 발생. {error.message}</p>
{/await}

Text input binding

인풋바인딩

Bindings

데이터 바인딩. 값을 화면에 어떻게 연결할 것인가.

Textbinding

입력받은 값을 바인딩. on:input으로 값을 받거나 :bind로 변수에 바로 값을 반영할 수 있음

바인딩 전 그냥 ... <input value={stringValue}>
on:input으로 인풋 이벤트에서 바인딩을 손구현 <input on:input={eventHandler}>
:bind로 value의 변수에 바로 바인딩             <input bind:value={stringValue}>

예제

<script>
  let name = 'defaultValue';
  let eventName = 'defaultValueOfEventName';

  function inputHandler(){// 인풋 이벤트에서 바인딩을 손구현
    eventName = event.target.value;
  }
<script>

<input bind:value={name}>
This is my name. {name}!

<input on:input={inputHandler}>
This is my name using Script. {eventName}

CheckBox

<input type=checkbox bind:group={flavours} name="flavours" value="Raspberry ripple">

Groups

수정 가능한 에디트박스

<div contenteditable="true" bind:innerHTML={html}>
</div>

(쓰는 중)꼐쏚

쓰는 중

참조

Svelte Tutorial : https://svelte.dev/tutorial/
헤이 모두들 안녕 : https://www.youtube.com/watch?v=euq0I1sXg9Q

TypeScript Cheetsheet

promise