[SVELTE] 스벨트의 생명주기 (LIFE CYCLE)

생명주기 (LIFE CYCLE)란?

컴포넌트가 연결되고 해제되는 등의 컴포넌트 생명주기를 말합니다.

ex) 클릭해서 toggle 이 true 로 바뀌고, Child 컴포넌트가 출력될 때, 이 Child와 연결이 되었다라고 볼 수 있다.
(Mount 되었다 라고 말한다.)
다시 클릭해서 toggle 이 false 가 되고, Child 컴포넌트가 사라질 때, 연결이 해제 되었다라고 볼 수 있다.
(Destroy 되었다 라고 말한다.)
toggle 버튼을 누를때 마다 toggle 라는 데이터가 변경되고, 그 데이터에 의해서 특정한 내용이 변한다.
-> 반응성을 가진다.(화면이 갱신, 데이터 동기화(렌더링) 
-> before update (바뀌기 전) 
-> after update (바뀐 후) 로 볼 수 있다.  

 

순서대로 정리하자면, 최초로 컴포넌트 연결 시

beforeUpdate (DOM과 데이터를 동기화(렌더링))-> onMount -> afterUpdate -> onDestroy 의 순서이다. 

• 각 lifecycle 을 lifecycle hook 이라고도 부른다. 
• 컴포넌트를 연결해제 하면, 앞의 lifecycle은 실행되지않고, 연결해제 직전에 onDestroy 만 실행된다. 
• 컴포넌트의 데이터를 갱신하면, onMount는 실행되지 않고, beforeUpdate 와 afterUpdate만 실행된다. 

---

Code 에서의 사용

스벨트 코드 상에서 life cycle hook 을 사용해주기 위해서는 각각의 hook 들을 import 해서 사용할 수 있습니다.

여기에서는 간단하게 onMount 와 onDestroy 만 다뤄보겠습니다. 

 

onMount

onMount 는 현재 컴포넌트가 준비되면, 콜백 함수의 내용을 실행합니다.

즉, DOM 이 마운트 되고나서 실행될 구문들을 작성해주며, 콜백 함수 내에 return()=>{} 시 여기에 들어가게 될 내용은 onDestroy() 랑 같은 타이밍에 실행됩니다.

onDestroy

컴포넌트가 사라지기 직전에 실행할 구문을 콜백함수에 넣어줍니다.

 

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

	let refreshTimer: NodeJS.Timeout;
    
	onMount(() => {
    	getMonitoringData();
		refreshTimer = setInterval(() => {
        		getMonitoringData();
            }, refreshInterval);
        });
    
	onDestroy(() => {
		clearInterval(refreshTimer);
	});
</script>