[SVELTE] 스벨트 문법

저번 시간에는 스벨트란 무엇인지, 그리고 스벨트 Template 설치에 대해서 알아보았습니다.

이번 시간에는 스벨트에서 사용하는 문법에 대해서 간단히 알아보도록 하겠습니다.

 

svelte 기본 구성

• 기본적으로 하나의 svelte 파일 내에서 script 태그, html 태그, style 태그를 사용할 수 있습니다.
• Html 태그에서 {} 를 사용하면 js 문법이 사용 가능합니다. (선언적 렌더링 가능) 

예시 코드

<script lang="ts">
	import type { ICardWrapperStyle } from './schema';

	export let customClassName: ICardWrapperStyle | undefined = undefined;

	let customClassString: string = '';

	if (customClassName) {
		// make string by Object.entries
		customClassString = Object.entries(customClassName).reduce((acc, [_, value]) => {
			return `${acc} ${value}`;
		}, '');
	}
</script>

<article class={customClassString}>
	<slot />
</article>

 

---

bind

• 데이터의 양방향 연결(양방향 데이터 바인딩) –단방향 바인딩 앞에  bind: 를 붙여준다.  
  => ex) input 에서 값을 입력하면 다른 태그의 값도 바뀐다.
  
• on:input 과 value 로 묶어주는 역할을 bind: 하나로 수행 가능 

// 일반적인 방법
<input type="text" on:input = {(e)=>{text = e.target.value}} value = {text}> 

// bind 사용 
<input type="text" bind:value={text}>

---

조건문과 반복문

조건문

• Script 태그 내에서 if ( ){ } 문을 작성하거나, html 에서 if 사용 가능 

• Html에서 조건문 사용시 { #if 조건절 } 로 시작하고, {/if} 로 닫아준다. 

• {:else} 를 조건문 사이에 넣어줘서 else 문 사용 가능 

• 시작하는 구문 - # , 중간에 들어가는 구문 - : , 마무리 짓는 구문 - /  

{#if isEmpty}
	<div class="w-full h-full rounded-md relative bg-white overflow-hidden">
		<div
			class="w-[400%] h-full bg-gradient-to-r from-gray-200 via-white to-gray-200 animate-loading"
		/>
	</div>
{:else}
	<div
		class="text-black w-full h-full flex justify-center items-center m-auto gradient-animation-effect"
		style="
		--gradation-second-color: {gradationEffect?.color?.secondGradationColor};
		--animation-duration: {gradationEffect?.animation?.duration};"
	>
		<span class="font-semibold">{caption}</span>
		{#if spinner}
			<img class="bg-transparent h-8" src="/icon/Spinner.gif" alt="loading" />
		{/if}
	</div>
{/if}

반복문

• Html 태그에서 사용시 {#each} 로 시작하고, {/each} 로 닫아준다. 

• Ex) {#each array as item}  -> array 배열을 순회하면서 각각의 데이터를 item이라 하자.
            <li>{item}</li> 
         {/each}

 

• -> map 메서드로 뿌려준 것과 같다.

{#each Object.entries(filteredSWData) as data}
	<div class="border-l-[1px] border-black">
		<SwStatusAlarmDisplay machineName={data[0]} data={data[1]} />
	</div>
{/each}

---

Props 전달

Ex) App.svelte -> Fruits.svelte 

// App.svelte
<script> 
	import Fruits from './Fruits.svelte' 

	let array = ['Apple','Banana','Orange','Kiwi','Grape'] 

 </script> 

 <Fruits item = {array}/>

// Fruit.svelte
<script>
	export let item 
</script> 

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

• Props 를 받으려는 쪽에서 script tag 에 export let 선언해줘야한다.
  -> 이렇게 함으로써 외부에서 값을 받아올 준비가 되었다는 뜻.

---

STORE

Props 를 계속 내려주게 되면, 중간에 불필요하게 넘겨주는 상황이 발생할 수도 있는데, 이때 store 를 사용해서 이런 상황을 해결해줍니다.

리액트의 store를 사용할 때와는 다르게, svelte 에서는 store 관리를 매우 간단하게 할 수 있습니다.

store 객체는 set, subscribe, update 메서드를 통해서 조작 가능. 
- set : store값 전체를 초기화 해줌 
- subscribe : store값이 바뀌면 자동으로 반영.. 
- update : store 값 일부만 변경 
이런 메서드를 통해 구현하는것이 아닌, 간단하게 $ 표시를 붙이는 것을 Auto-subscription 이라고 한다. 

STORE 사용 방법

1. store.js 생성

<script> 
    import { writable } from 'svelte/store'   

    export let storeName = writable('jin') 
    // 그냥 export let storeName = '' 로 해주면, 밖에서 수정을 못한다. 
  </script>

 

2. App.svelte 에서 store 객체를 import 한 후 값 재할당

<script> 
    import { storeName } from './store.js' 
    import Parent from './Parent.svelte' 

    let name = 'world' 
    
    console.log(storeName) 
    console.log($storeName) 
    // store 객체에 $ 를 붙여서 쓰면, 할당된 값이 나옴 
    // set, update, subscribe 를 사용해 구현하는 대신, 간단하게 $ 표시를 하는것을 Auto-subscription 이라 한다. 

    $storeName = name 
</script> 

  <h1> 
    Hello {$storeName}! 
  </h1> 

  <Parent/>

 

3. Parent.svelte 에서 다시 Child.svelte 로 내려줄 필요 없이 바로 사용 가능

<script>  
    import { storeName } from './store.js' 
</script> 

<div> 
    Child {$storeName} 
</div>

=> 이처럼 store.js 를 사용하여 간단하게 상태 공유 가능

---

REACTIVITY 반응성 구문 ( $: )

반응성 구문이란, 대상이 되는 상태값의 변화를 계속 주시하여 변화가 발생할 때마다 해당 부분을 리렌더링 해줍니다.

<script>  
    let count = 0 
    let double = count * 2	// 초기값인 count 0 일때만 인식하여 클릭해도 계속 0 으로 동작 
    $: double = count * 2	// $: 을 사용하면 값이 변함에 따라서 해당값을 최신값으로 갱신      

    function handleClick() { 
    count += 1; 
  } 

</script> 

<button on:click={handleClick}> 
  Clicked {count} {count === 1 ? 'time' : 'times'} 
</button>  

<p>{count} doubled is {doubled}</p>

 

---

SLOT

컴포넌트가 반복적으로 사용될 때, 재사용을 위해 사용하는 것이 slot 입니다.

slot 을 사용할 경우, 기본값 (Defalut)을 이용해 입력하지 않은 내용에 대한 처리가 가능합니다.

<slot></slot> 에 해당하는 내용을 넣어줍니다.

사용방법

1. Card.svelte 를 생성해 준 뒤, slot 태그를 입력

<article class="card"> 
   <slot name="name"></slot> 
</article>

 

2. App.svelte 에서 Card.svelte 를 Import 한 후 컴포넌트를 사용하면, slot 태그 안에 내용이 들어간다.

<script> 
   import Card from './Card.svelte' 
</script> 

 <Card> 
    <span slot=”name”> Mr. James </span>
 </Card>

 

---

비동기 처리 (Await 블록)

await 블록은 Promise 객체가 pending 상태일 때 {#await} 을, fulfilled 상태일 때, {then} 식을 실행하며,

{:catch error} 로 에러 핸들링 가능 

<script> 
  async function getPosts(){ 
    const res = await fetch("https://jsonplaceholder.typicode.com/posts"); 
    const json = await res.json(); 
    return json; 
  } 

  let promisePosts = ""; 
</script> 

<button on:click={() => promisePosts = getPosts()}>Get post lists</button> 
<!-- promisePosts가 Pending 상태일 때 #await 식이 실행되고, --> 

{#await promisePosts} 
	<p>Wait...</p> 
	<!-- promisePosts가 Fulfilled 상태로 변하면 :then 식이 실행됨 --> 
	{:then posts} 
	<p>대충 posts를 가공하는 코드...</p> 
{/await}

---

HTML 블록

{@html} 블록은 html 로 구성된 문자열을 텍스트가 아닌 html 엘리먼트로 표현해줍니다.

<script> 
  let content = ` 
    <h1>Hello</h1> 
    <p>World!</p> 
  `; 
</script>  

{@html content}