Svelte에서 onDestroy() 수명 주기 함수는 어떻게 작동합니까?

DOM에서 컴포넌트를 제거할 때 onDestroy() 메소드가 사용됩니다. 컴포넌트가 DOM에서 제거되기 전에 호출해야 합니다.

새 구성 요소DateAndTimeComponent.svelte를 만들고 다음 코드를 추가해 보겠습니다.

<script>
    import { onMount } from 'svelte'

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
</script>

<table>
    <thead>
    <tr>
        <th>Date</th>
        <th>Epoch Time</th>
        <th>Time</th>
    </tr>
    </thead>

        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>

</table>

우리는 onMount() 수명 주기 함수만 구현했습니다. onMount를 모른다면 다음 기사를 방문하십시오.
그리고 App.svelte에서 다음을 추가합니다.

<script>
    import DateAndTimeComponent from "./DateAndTimeComponent.svelte";

    let showComponent = false;
</script>

<main>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

webpatehttp://localhost:5000를 방문하면 현재 showComponent 변수가 false이기 때문에 빈 페이지가 표시됩니다.

구성 요소를 표시하는 버튼을 추가할 수 있습니다. onMount는 컴포넌트가 DOM에 로드될 때 한 번만 호출됩니다.
App.svelte 에서 main 태그 아래에 다음을 추가합니다.

<script>
....
..
..
..
</script>

<main>
    <button on:click={ () => showComponent = !showComponent }>Show Component</button>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>

그리고 DateAndTimeComponent.svelte에서 onDestroy 수명 주기 기능을 추가합니다.

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

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });

    onDestroy( () => {
        console.log("Date Component removed")
    });

</script>

<table>
    <thead>

        <tr>
            <th>Date</th>
            <th>Epoch Time</th>
            <th>Time</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>
    </tbody>


</table>

import { onMount, onDestroy } from 'svelte' 보세요

그리고

onDestroy( () => {
        console.log("Date Component removed")
    });