[Svelte] 라이프싸이클 - OnDestroy

컴포넌트 생성

Lifecycle 폴더 하위에 OnDestroy.svelte 컴포넌트를 생성해 준다.

<script>
  import OnMount from './OnMount.svelte';
  import OnDestroy from './OnDestroy.svelte';

</script>

<div>
  <OnMount />
  <OnDestroy />
</div>

 

라이프싸이클

라이프싸이클이란 생명주기를 뜻 한다. 라이프싸이클 함수는 컴포넌트가 화면에 마운트(화면에 렌더링)되거나, 마운트 되기전, 업데이트전, 업데이트후, 혹은 언마운트(화면에서 제거)될 때 실행되는 콜백 함수들을 뜻한다.

Svelte에는 총 4가지의 라이프싸이클 함수가 있다

onMount, onDestroy, beforeUpdate, afterUpdate 이렇게 네가지이다.

  

onDestroy

<!--./src/Component/Home/Lifecycle/OnDestroy.svelte-->
<script>
  import {onMount, onDestroy} from 'svelte';

  onMount(function () {
    console.log('onDestroy에서 마운트 됐어요~!');
  });
  onDestroy(function () {
    console.log('onDestroy에서 마운트 해제됐어요ㅠㅠ');
  });
</script>

지금까지 만들었던 페이지에서 컴포넌트가 언마운트되는 부분은 페이지 라우팅이 있다.

이전 포스팅을 참고해보자.

Home라우터 안에 OnDestroy 컴포넌트가 있다. 즉 다른 라우터로 가게되면 OnDestroy컴포넌트가 없고, 이때 OnDestroy컴포넌트는 언마운트 된다. OnDestroy컴포넌트가 언마운트 될 때 onDestroy 함수가 실행된다.

페이지를 새로고침하면 OnDestroy컴포넌트가 마운트되고, Contact1라우터로 이동하면 OnDestroy컴포넌트가 언마운트된다. 그 후에 Contact1 에서 Contact2 로가면 아무런 변화가 없다. 그 이유는 Contact1컴포넌트에는 OnDestroy컴포넌트가 없기때문이다. 다시 Home라우터로 이동하면 OnDestroy컴포넌트가 마운트된다.

 

개인 기록용입니다. 만약 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!