Svelte) Lifecycle functions and Context API

 

- onMount

function onMount<T>(
	fn: () =>
		| NotFunction<T>
		| Promise<NotFunction<T>>
		| (() => any)
): void;

: onMount 함수는 컴포넌트가 DOM에 마운트된 직후에 콜백을 실행하기 위해 예약합니다. 이 함수는 컴포넌트의 초기화 중에 호출되어야 합니다(하지만 컴포넌트 내부에 위치할 필요는 없으며, 외부 모듈에서 호출될 수 있습니다).

: onMount는 서버 사이드 컴포넌트 내에서 실행되지 않습니다.

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

	onMount(() => {
		console.log('the component has mounted');
	});
</script>

 

onMount에서 반환된 함수는 컴포넌트가 언마운트될 때 호출됩니다.

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

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

		return () => clearInterval(interval);
	});
</script>

 

* 이 동작은 onMount에 전달된 함수가 동기적으로 값을 반환할 때만 작동합니다. 비동기 함수는 항상 Promise를 반환하므로 동기적으로 함수를 반환할 수 없습니다.

 

- beforeUpdate

function beforeUpdate(fn: () => any): void;

: 컴포넌트가 상태 변경 후 업데이트되기 바로 전에 실행될 콜백을 예약합니다.

: 처음으로 콜백이 실행되는 시점은 초기 onMount 이전입니다.

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

	beforeUpdate(() => {
		console.log('the component is about to update');
	});
</script>

- afterUpdate

: 컴포넌트가 업데이트된 직후에 실행될 콜백을 예약합니다.

* 처음으로 콜백이 실행되는 시점은 초기 onMount 이후입니다.

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

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

 

 

- onDestroy

: 컴포넌트가 언마운트되기 바로 전에 실행될 콜백을 예약합니다.

: onMount, beforeUpdate, afterUpdate, onDestroy 중에서는 이 함수만 서버 사이드 컴포넌트 내에서 실행됩니다.

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

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

 

 

- tick

: 보류 중인 상태 변경이 적용된 후 또는 보류 중인 상태 변경이 없는 경우 다음 마이크로태스크에서 해결되는 프로미스를 반환합니다.

<script>
	import { beforeUpdate, tick } from 'svelte';

	beforeUpdate(async () => {
		console.log('the component is about to update');
		await tick();
		console.log('the component just updated');
	});
</script>

 

 

- setContext

: setContext 함수는 임의의 컨텍스트 객체를 현재 컴포넌트와 지정된 키와 연결하고 해당 객체를 반환합니다. 그런 다음 해당 컨텍스트는 컴포넌트의 자식들(슬롯된 콘텐츠 포함)에서 getContext를 사용하여 사용할 수 있습니다.

: 라이프사이클 함수와 마찬가지로 이 함수는 컴포넌트의 초기화 중에 호출되어야 합니다.

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

	setContext('answer', 42);
</script>

 

* 컨텍스트는 기본적으로 반응적이지 않습니다. 따라서 컨텍스트에서 반응적인 값을 필요로 한다면, 리액티브한 스토어를 컨텍스트로 전달할 수 있습니다.

 

- getContext

: 지정된 키를 가진 가장 가까운 부모 컴포넌트에 속한 컨텍스트를 검색합니다. 이 함수는 컴포넌트의 초기화 중에 호출되어야 합니다.

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

	const answer = getContext('answer');
</script>

 

 

 

- hasContext

: 주어진 키가 부모 컴포넌트의 컨텍스트에 설정되었는지를 확인합니다. 이 함수는 컴포넌트의 초기화 중에 호출되어야 합니다.

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

	if (hasContext('answer')) {
		// do something
	}
</script>

 

 

 

- getAllContexts

function getAllContexts<
	T extends Map<any, any> = Map<any, any>
>(): T;

: 가장 가까운 부모 컴포넌트에 속한 전체 컨텍스트 맵을 검색합니다. 이 함수는 컴포넌트의 초기화 중에 호출되어야 합니다. 예를 들어, 프로그래밍적으로 컴포넌트를 생성하고 기존 컨텍스트를 전달하려는 경우에 유용합니다.

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

	const contexts = getAllContexts();
</script>

 

- createEventDispatcher

function createEventDispatcher<
	EventMap extends Record<string, any> = any
>(): EventDispatcher<EventMap>;

: 컴포넌트 이벤트를 디스패치하는 데 사용할 수 있는 이벤트 디스패처를 생성합니다. 이벤트 디스패처는 이름과 디테일 두 가지 인수를 받을 수 있는 함수입니다.

: createEventDispatcher로 생성된 컴포넌트 이벤트는 CustomEvent를 생성합니다. 이러한 이벤트는 버블링되지 않습니다. 디테일 인수는 CustomEvent.detail 속성에 해당하며 임의의 유형의 데이터를 포함할 수 있습니다.

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

	const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('notify', 'detail value')}>Fire Event</button>

 

: 자식 컴포넌트에서 디스패치된 이벤트는 부모 컴포넌트에서 청취할 수 있습니다. 이벤트가 디스패치될 때 제공된 데이터는 이벤트 객체의 detail 속성에서 사용할 수 있습니다.

<script>
	function callbackFunction(event) {
		console.log(`Notify fired! Detail: ${event.detail}`);
	}
</script>

<Child on:notify={callbackFunction} />

이벤트는 dispatch 함수에 세 번째 매개변수로 전달하여 취소 가능합니다. 이 함수는 event.preventDefault()로 이벤트가 취소된 경우에는 false를 반환하고, 그렇지 않은 경우에는 true를 반환합니다.

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

	const dispatch = createEventDispatcher();

	function notify() {
		const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
		if (shouldContinue) {
			// no one called preventDefault
		} else {
			// a listener called preventDefault
		}
	}
</script>

 

이벤트 디스패처에 이벤트를 수신할 수 있는 타입을 지정할 수 있습니다. 이를 통해 컴포넌트 내에서 코드가 더 안전하게 되며, 컴포넌트를 사용할 때 이벤트의 타입이 제한됩니다. 여기에서 어떻게 할 수 있는지 확인하세요.

 

 

 

 

Reference) 위 내용은 Svelte 공식 문서의 내용을 번역한 내용입니다.

svelte • Docs • Svelte