Svelte TIL 03

참고

Svelte.js 완벽 가이드 - HEROPY

---

vscode상 svelte환경구성

template 클론 및 패키지 설치

npm i degit
npx degit sveltejs/template my-svelte
npm i 

개발서버 실행

npm run dev

---

Lifecycle

종류

다섯가지가 있다. hook이라고도 부른다.

• beforeUpdate : 렌더링 이전의 전처리가 완료된 후
• onMount : 최초 마운팅되어 렌더링 된 후
• afterUpdate : 렌더링 된 후. 또는 onMount 이후.
• onDestroy : 컴포넌트가 연결 해제되기 전
• tick

상황별 hook 호출

• 마운트 된 경우 : beforeUpdate → onMount → afterUpdate
• 데이터 갱신 된 경우 : beforeUpdate → afterUpdate
• 언마운트 된 경우 : onDestroy

4가지 라이프사이클의 확인

<!-- [코드 3-1-1] App.svelte-->
<script>
    import Something from './Something.svelte';
    let show = false;
    let text = 'wonjin';
</script>

<button on:click={ ()=>{show=!show;} }>
    Show/Hide
</button>

{#if show}
    <input type="text" bind:value={text} />
    <Something {text} />
{/if}

<!-- [코드 3-1-2] Child.svelte-->
<script>
    import { onMount, onDestroy, beforeUpdate, afterUpdate } from "svelte";
    export let text;

    onMount(()=>{
        console.log('mount');
        return () => {
            console.log('destory - from onMount [2]');
        }
    });

    onDestroy(()=>{
        console.log('destroy - from onDestroy [1]');
    });

    beforeUpdate(()=>{
        console.log('beforeUpdate : ', text);
    });

    afterUpdate(()=>{
        console.log('afterUpdate : ', text);
    });
</script>

<h1>{text}</h1>

tick의 사용

<!-- [코드 3-2] App.svelte-->
<script>
  import { tick } from "svelte";

  let text = 'before Render';

  const onClick = async (e) => {
    text = 'after Render';
    await tick();
    const header = document.getElementById('header');
    alert(header.textContent);
  };
</script>

<h1 id="header">{text}</h1>
<button on:click={onClick}>re-render</button>

await tick()이 없으면 alert창에는 'after Render'가 아닌 'before Render'가 출력된다. text='after Render'가 실행된 그 즉시 리렌더링 되지 않는다. 렌더링은 특정 단위/주기로 일어난다. tick()을 이용하여 그 즉시 리렌더링이 처리되도록 할 수 있다.