[Svelte]생명주기(Lifecycle) - onDestroy 함수

onDestroy 함수

Svelte의 생명주기 함수인 onDestroy() 함수는 컴포넌트가 DOM에서 제거될 때 호출됩니다. 컴포넌트가 DOM에서 제거될 때 실행되어야 하는 소스 코드 또는 함수를 인자로 전달합니다.

 

다음 예제는 "Child 컴포넌트 활성화" 버튼을 클릭하면 Child 컴포넌트가 DOM에 활성화되고 "Child 컴포넌트 비활성화" 버튼을 클릭하면 Child 컴포넌트가 DOM에 비활성화됩니다.

 

Child 컴포넌트가 DOM에서 제거될 때, 생명주기 함수인 onDestroy() 함수가 호출되면서 콘솔에 문구를 출력합니다.

 

[부모 컴포넌트 - 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>

[실행 결과]

---

onMount 함수의 return문

컴포넌트 또는 DOM 요소가 DOM에 추가될 때, 호출되는 생명주기 함수인 onMount()에는 return문을 작성할 수 있습니다.

 

onMount() 함수의 return문은 컴포넌트 또는 DOM 요소가 DOM에서 제거될 때, 실행되어야 하는 함수를 작성합니다. 즉, onMount() 함수의 return문과 onDestroy() 함수는 동일한 역할을 수행합니다.

 

다음 예제는 Child 컴포넌트가 DOM에서 제거될 때, onMount() 함수의 return문과 onDestroy() 함수를 호출합니다.

 

[부모 컴포넌트 - 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}

[자식 컴포넌트]

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

  onDestroy(() => {
    console.log('onDestroy() - Child 컴포넌트 비활성화');
  })
</script>

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

[실행 결과]

실행 결과에서 확인할 수 있듯이 onDestroy() 함수가 onMount() 함수의 return문보다 빨리 실행됩니다. onMount() 함수에 return문이 onDestroy() 함수와 동일한 역할을 수행하는 이유는 svelte 초창기 onDestroy() 함수가 없었기 때문입니다.

 

실행 순서 이외에 차이점은 없으므로 원하는 방식으로 코드를 작성하면 됩니다.

---

onDestory 함수를 사용하는 경우

onDestroy() 함수는 주로 아래 작업을 처리하기 위해 사용됩니다.

- 컴포넌트가 다이어로그인 경우 다이어로그가 닫힌 후 메인 컴포넌트에 포커스를 되돌리거나 메인 컴포넌트의 데이터를 다시 불러옵니다.

- 이벤트 리스너 등록을 취소합니다.

- subscribe() 함수를 사용하여 스토어를 구독했을 때, 스토어 구독 취소하기 위해 사용할 수 있습니다.

- 사용자 활동 기록을 남기기 위해 사용할 수 있습니다.