스벨트[SVELTE] - 💯 라이브사이클(lifecycle) 알아보기

Svelte의 라이프 사이클

• beforeUpdate
• onMount
• afterUpdate
• onDestory

---

beforeUpdate

• 컴포넌트가 업데이트 되기 직전에 콜백함수가 실행될 수 있도록 스케줄링함.
• 서버 컴포넌트에서는 실행되지 않음.

import { beforeUpdate } from 'svelte';

beforeUpdate(() => {
	console.log('컴포넌트가 업데이트 되기 직전입니다');
});

---

onMount

• DOM에 컴포넌트가 마운트 되자마자 콜백함수가 실행될 수 있도록 스케줄링함.
• 컴포넌트 초기화 중에 호출되어야 함.
• 외부 모듈에서 호출할 수 있음.
• 서버 컴포넌트에서는 실행되지 않음.

import { onMount } from 'svelte';

onMount(() => {
	console.log('컴포넌트가 마운트되었습니다');
});

• 만약 onMount에서 반환된 함수가 있다면, 컴포넌트가 언마운트 될 때 해당 함수가 호출
• 아래는 onMount에 전달된 함수가 동기적으로 값을 반환하는 경우
• 비동기 함수는 항상 Promise를 반환하므로 동기적으로 함수를 반환할 수 없음.

import { onMount } from 'svelte';

onMount(() => {
	const interval = setInterval(() => {
		console.log('삐');
	}, 1000);

	return () => clearInterval(interval);
});

동기적(Synchronous): 작업이 완료될 때까지 다음 작업이 실행되지 않는 방식입니다. 즉, 하나의 작업이 완료되어야 다음 작업이 시작됩니다. 동기적 방식은 작업의 순서가 중요한 경우에 사용됩니다.

비동기적(Asynchronous): 작업이 완료되기 전에 다음 작업이 실행될 수 있는 방식입니다. 비동기적 방식에서는 작업이 완료되면 콜백 함수나 이벤트를 통해 결과를 반환합니다. 비동기적 방식은 작업이 오래 걸리는 경우나 여러 작업을 동시에 처리해야 하는 경우에 사용됩니다.

 

---

afterUpdate

• 컴포넌트가 업데이트된 후에 특정 작업을 실행하도록 스케줄링하는 함수
• "onMount" 함수가 실행된 후에 처음으로 실행됨.
• 어떠한 컴포넌트가 업데이트되면 무조건 실행됨.
• 서버 컴포넌트에서는 실행되지 않음.
• 활용 예시: UI 재렌더링, 데이터 동기화

<script>
	import { afterUpdate } from 'svelte';

	afterUpdate(() => {
		console.log('the component just updated');
	});
</script>

---

onDestroy

• 컴포넌트가 제거되기 직전에 특정 작업을 실행하도록 스케줄링하는 함수
• 서버 컴포넌트에서는 실행이 가능함.

<script>
	import { onDestroy } from 'svelte';

	onDestroy(() => {
		console.log('the component is being destroyed');
	});
</script>