[Svelte] Svelte 기본문법 #1

1. 변수선언 

스벨트의 반응형 state는 기본 javascript 변수선언 명령어인 let으로 가능하며 methods로 state를 변경하여 변경된 state가 mark up 영역에 즉시 반영이 됩니다.

2. 반응성 $:

vue의 computed 속성의 동작과 비슷하며, 대상의 상태 값을 감지하여 동작된다.

<script>
let count = 0;
$: doubled = count *2;

$: if (count >=10) {
    alert ('카운트가 10을 넘었습니다. ');
    count = 9;
}
$: {
    console.log( count)
    console.log( doubled)
}
function handleClick() {
    count += 1;
}
</script>
<button on:click={handleClick}>
클릭 수 {count} {count === 1? 'time' : 'times'}
</button>

<p> {count} 두배는 {doubled}</p>

3. Component 불러오기

 // Main.svelte
 <script>
    import  Header from './header.svelte'
    import  Content from './content.svelte'
    import  Footer from './footer.svelte'
</script>

<Header /> // 자식 컴포넌트
<Content /> // 자식 컴포넌트
<Footer /> // 자식 컴포넌트

4. Props (단방향 binding)

// Main.svelte
<script>
    import ChildrenComponent from './ChildrenComponent.svelte'
    let count = 1;

    function handleClick() {
        count += 1;
    }
</script>
<ChildrenComponent { count } { handleClick } >

// ChildrenComponet.svelte
<script>
    export let count; // 단방향 상태값 전달
    export let handleClick; // 상위 컴포넌트의 setter 함수를 props로 받아서 상태값 변경 처리
</script>
<button on:click={handleClick} >
    클릭수 {count}
</button>

5. Component Event

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

  function handleMessage(event) {
    alert(event.detail.text);
  }
</script>
// 하위 컴포넌트의 'message' 이벤트를 Listen 하여 handleMessage를 동작시킨다
<Inner on:message={handleMessage} />


// Inner.svelte
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function sayHello() {
   //dispatch를 이용하여 상위 컴포넌트에 'message'이벤트 전달
    dispatch('message', { 
      text: 'Hello!'
    });
}
</script>

<button on:click={sayHello}>
  Click to say hello
</button>

6. html

1) 논리 블록

{#if 조건1}
<h1> 조건1 <h1>
{:else if 조건2}
<h2> 조건2 <h2>
{:else if 조건3}
<h3> 조건3 <h3>
{:else}
<h4> 조건4 <h4>
{/if}

2) 반복 블록

<ul>
 {#each datas as data}
   <li>{data.name}</li>
 {/each}
</ul>

7. Await Block 

<script>
  let promise = getRandomNumber();
  async function getRandomNumber() {
	const res = await fetch(`/tutorial/random-number`);
	const text = await res.text();

	if (res.ok) {
		return text;
	} else {
		throw new Error(text);
	}
  }
  
  function handleClick() {
      promise = getRandomNumber();
  }
</script>

<button on:click={handleClick}>
  generate random number
</button>

{#await promise}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

 

 

 

참고사이트

https://svelte.dev/docs/introduction

https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%EB%B2%A8%ED%8A%B8-%EC%8B%9C%EC%9E%91-%EC%9B%B9-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C&unitId=152815&tab=curriculum