[Svelte] Svelte 기본문법 #5 (Lifecycle)

Lifecycle

Svelte Component의 Lifecycle(생명주기)은 BeforeUpdate, onMount, afterUpdate, onDestroy 순서로 동작됩니다.
각 생명주기가 동작되는 시점에, 해당 Hook Methods 내부에서 동작시킬 코드를 정의하여 사용합니다.

 

1. Lifecycle Hook

1) beforeUpdate

- Component 생성 최초, Mount가 실행되기 전에 먼저 실행
- 이후 Component의 변경이 감지되면 beforeUpdate -> afterUpdate 순서로 실행
- 반응성이 있는 데이터를 beforeUpdate Hook 내부에서 사용하면 무한루프에 빠질 수 있기 때문에, 사용해야 한다면 동작 조건을 필히 입력

2) onMount

- Component가 Dom에 부착된 이후 (렌더링 이후)에 실행됨
- 반환 함수 (return () => {}) 를 넣는 경우 onDestroy와 같은 기능을 하며, 두 방법 중 1개만 사용해야 함.
- 비동기 함수 로직 (async await)을 넣는 경우 반환 함수 return은 무시되기 때문에 onDestroy Hook을 사용

3) afterUpdate

- 반응성이 있는 값이 변경될 때 실행 ( beforeUpdate -> onMount 후에 실행)

4) onDestroy

- 컴포넌트가 해제되기 직전에 실행됨 

2. 사용방법

import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte'
   
beforeUpdate(async () => {
});

onMount(async () => {
});

afterUpdate(async () => {
});

onDestroy(async () => {
});

3. tick

Svelte는 특정 함수가 실행 될 때 함수 내부에서 값이 할당되는 즉시 화면(Dom)에 Update되는 것이 아니라, 해당 함수가 완전히 종료되면 Update됩니다. 만약 함수 동작 중 값을 할당하는 즉시 Dom에 Update 시키고자 한다면 tick()을 사용합니다. 

<script>
import { tick } from 'svelte';
let name = 'world'

async function handler() {
    name = 'korea';
    await tick(); 
    const h1 = document.querySelector('h1')
    console.log(h1); 
}
// tick을 사용하지 않았다면 'hello world'가 출력되고 handler함수가 종료되면 그때 하면에 갱신되지만
// 비동기 tick() 사용으로 인해 log는 'hello korea'가 출력됩니다. 
</script>

<h1 on:click={handler}>hello {name}</h1>

 

 

참고사이트

https://velog.io/@katanazero86/svelte-life-cycle-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0

https://kyounghwan01.github.io/blog/Svelte/svelte-basic/#lefecycle