[Svelte 시리즈] 컴포넌트 생명주기 (Lifecycle) 와 훅(Hook)

이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.

Svelte에서 컴포넌트는 화면에 랜더링되거나 사라질 때를 나타내는 컴포넌트의 상태가 있다.

이 상태의 흐름을 컴포넌트 생명주기라 한다.

• mounted: 컴포넌트가 화면 또는 다른 컴포넌트에 랜더링된 (연결된) 상태. 이 전에는 화면 요소에 접근할 수 없음
• destroyed: 컴포넌트가 화면 또는 다른 컴포넌트에서 사라진 (연결이 해제된) 상태
• before update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 되기 전 상태
• after update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 된 후 상태

이런 상태들은 컴포넌트가 화면(DOM)상에서 어떻게 다뤄지냐에 따라 다양하게 호출된다.

예를들어 특정 컴포넌트가 화면에 최초로 랜더링(연결될) 될 때 before update → mount → after update 의 주기로 진행된다. (destroyed는 해당 컴포넌트가 사라질 때)

또한, 화면에 그려져있는(연결되있던) 컴포넌트의 반응성 데이터가 변경되어 화면이 갱신될 때 before update → after update 순으로 진행된다.

그리고 화면에 그려져있던(연결되있던) 컴포넌트가 사라질 때 destroyed 상태로 진행된다.

각 상태는 훅(Hook)을 통해 접근하고 해당 상태일 때 처리해야할 로직을 수행할 수 있다.

• mounted: onMount
• destroyed: onDestroy
• before update: beforeUpdate
• after update: afterUpdate
• App.svelte
  • 각 Hook은 svelte 통해 import할 수 있고 해당 주기 때 수행할 로직을 전달할 수 있다.
  • 아래와 같은 코드를 작성하고 언제 어떤 Hook이 실행되는지 확인해보자
  • 참고로 과거엔 onDestroy 가 없었고 onMount 함수에서 함수를 반환하는 형태로 destroyed hook을 구현했었다. 지금도 두 방법 모두 가능하지만 onDestroy를 사용하는게 보다 더 직관적으로 보인다.

<script>
	import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';
	let count = 0;
	onMount(() => {
		console.log('Mounted!!');
	});
	onDestroy(() => {
		console.log('Destroyed');
	});
	beforeUpdate(() => {
		console.log('before update');
	})
	afterUpdate(() => {
		console.log('after update');
	});
</script>

<h1>Something {count}</h1> 
<button type="button" on:click={() => count++}>+</button>