Svelte 입문 (LIFECYCLE)

Shy·2024년 9월 23일

Svelte

목록 보기

5/12

LIFECYCLE

onMount

Svelte의 생명주기 함수인 onMount()는 컴포넌트가 DOM에 추가될 때 호출된다.
컴포넌트가 DOM에 추가될 때 최초 한 번만 실행해야 하는 작업을 작성할 수 있다.
onMount() 함수는 주로 아래 작업을 처리하기 위해 사용된다.

API 요청하여 데이터 가져오기
데이터 처리하기
DOM 요소 접근하기(포커싱 처리 등)

전체 화면을 onMount로 로드하는것도 가능하지만 컴포넌트마다 onMount도 가능하다.

기본 구문은 아래와 같다.

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

	onMount(() => {
		// 컴포넌트가 처음 렌더링되고 DOM에 마운트되었을 때 실행할 코드
		console.log('Component has been mounted.');

		// 필요한 정리 작업을 반환할 수 있음 (optional)
		return () => {
			console.log('Component is being unmounted.');
		};
	});
</script>

<p>Check the console when this component mounts and unmounts.</p>

onMount 주요 특징
- 한 번만 실행됨: onMount는 컴포넌트가 처음 렌더링된 후에 한 번만 실행된다.
- 정리 작업을 반환 가능: 함수가 반환하는 것이 있다면, 컴포넌트가 언마운트될 때 해당 반환된 함수가 호출되어 정리(cleanup) 작업을 처리할 수 있다. 이는 이벤트 리스너 해제나 타이머 제거 등에 사용된다.

비동기처리와 함께 사용하기

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

	let data = null;

	onMount(async () => {
		// 비동기 API 호출
		const response = await fetch('https://api.example.com/data');
		data = await response.json();
	});
</script>

{#if data}
	<p>Data: {JSON.stringify(data)}</p>
{:else}
	<p>Loading...</p>
{/if}

onMount는 비동기 함수와 함께 사용하여 데이터를 로드하거나 초기화할 수 있다.
데이터가 로드되면 컴포넌트가 업데이트되고 UI에 반영된다.

정리작업

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

	let interval;

	onMount(() => {
		// 타이머 시작
		interval = setInterval(() => {
			console.log('Tick');
		}, 1000);

		// 컴포넌트 언마운트 시 타이머 정리
		return () => {
			clearInterval(interval);
			console.log('Interval cleared');
		};
	});
</script>

<p>Check the console for interval logs.</p>

이 예시는 컴포넌트가 DOM에서 제거될 때(onMount가 반환한 함수가 실행될 때) 타이머를 제거하는 방식이다.

onDestroy

onDestroy()함수는 컴포넌트가 DOM에서 제가될 때 호출된다.
컴포넌트가 DOM에서 제거될 때 실행되어야 하는 소스 코드 또는 함수 인자로 전달한다.

이 함수는 React의 useEffect에서 반환하는 정리 함수와 유사하게 작동하며, 컴포넌트가 사라지기 전에 호출된다.

출처: https://developer-talk.tistory.com/629 [DevStory:티스토리]

<!-- 부모 컴포넌트 - App.svelte -->
<script>
  import Child from './Child.svelte';

  let isInputElementView = false;

  const handleClick = (param) => {
    isInputElementView = param;
  }
</script>

<button on:click={() => handleClick(true)}>
  Child 컴포넌트 활성화
</button>

<button on:click={() => handleClick(false)}>
  Child 컴포넌트 비활성화
</button>

{#if isInputElementView}
  <Child />
{/if}

<!-- 자식 컴포넌트 - Child.svelte -->
<script>
  import {onDestroy} from 'svelte'; // svelte 패키지 import 
  
  onDestroy(() => {
    console.log('onDestroy() - Child 컴포넌트 비활성화');
  })
</script>

<div>
  <h1>hello</h1>
</div>