Svelte onMount 수명 주기 방법을 사용하는 방법

소개

프런트엔드 개발자로서 우리는 특정 논리를 실행하기 위해 구성 요소가 언제 로드되고 브라우저 DOM에서 제거되는지 알아야 합니다. 프레임워크의 수명 주기 이벤트를 이해하면 매우 쉽게 수행할 수 있습니다. Svelte는 이러한 변경을 수행하기 위한 몇 가지 이벤트를 제공합니다.

onMount Svelte는 무엇입니까?

onMount는 컴포넌트가 DOM에 로드될 때 함수를 실행하는 방법을 제공합니다. 이것은 값을 초기화하고 API를 호출하여 일부 데이터를 로드하고 한 번만 실행해야 하는 작업을 수행하는 데 사용할 수 있습니다.

onMount 템플릿

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

    onMount(() => {
        // Write you code here....
        // This is executed when the component is loaded into the DOM

        // Optional return function
        return () => {
            // This is executed when the component is removed from the DOM
        }
    })
</script>

onMount의 예

몇 가지 예를 살펴보겠습니다.

API에서 데이터 가져오기

데이터 처리 중

DOM 요소 액세스

이벤트에 콜백 추가

API에서 데이터 가져오기

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

    let posts = [];
    onMount(async () => {
        let data = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
        let postData = await data.json(); 
        posts = [...postData];
    });
</script>

{#each posts as post}
    <h3>{post.title}</h3>
{/each}

API에서 반환된 데이터를 보관하기 위해 posts라는 변수를 생성하고 있습니다. 그런 다음 onMount를 사용하여 API를 호출할 수 있습니다. onMount 콜백 앞에 async 키워드를 추가하면 사용자가 await 구문을 사용할 수 있습니다. fetch 메서드를 사용하여 게시물 목록을 반환할 끝점을 호출합니다.
await 키워드를 사용하고 있기 때문에 다음 줄의 실행은 끝점 결과를 얻은 후에야 수행됩니다. 그런 다음 데이터를 json 형식으로 변환하고 posts 변수에 추가합니다.

데이터 처리

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

    let names = ['first', 'second', 'third'];
    onMount(() => {
        names = names.map((item) => {
            return item.toUpperCase();
        })
    });
</script>

{#each names as name}
    <h3>{name}</h3>
{/each}

이 예제에서는 간단한 논리를 사용하여 onMount의 데이터를 변환하고 있습니다. 구성 요소 로드 시 문자열을 대문자로 변환합니다.

DOM 요소에 액세스

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

    let emailInput;
    let email = "";

    onMount(() => {
        emailInput.focus();
    })
</script>

<input type="email" name="email" bind:value={email} bind:this={emailInput}/>

새 양식 페이지를 생성할 때 사용자가 텍스트를 직접 입력하기 시작하도록 하려면 bind:this 구문을 사용하여 입력 요소를 변수에 바인딩할 수 있습니다. 이렇게 하면 해당 요소의 모든 메서드를 호출할 수 있는 변수에 대한 액세스 권한이 부여됩니다. onMount가 실행될 때 요소가 화면에 렌더링되었음을 알기 때문에 onMount에서 메서드를 안전하게 호출할 수 있습니다.

이벤트에 콜백 추가

<script>
    import {onMount} from "svelte";
    let count = 0;

    const keydownListener = (event) => {
        if (event.keyCode == 32) {
            count = count + 1;
        }
    }

    const resetCount = () => {
        count = 0;
    }

    onMount(() => {
        window.addEventListener('keydown', keydownListener) 
        return () => window.removeEventListener('keydown', keydownListener);
    })
</script> 

<h2>
    "Space" key has been pressed {count} times
</h2>

<button on:click={resetCount}>Reset</button>

keydown라는 창 이벤트에 콜백을 추가하여 사용자가 수행하는 모든 키 입력을 들을 수 있습니다. 그런 다음 keyCode 값이 32인지 확인한 다음 카운터 값을 증가시킬 수 있습니다. onMount는 구성 요소가 DOM에서 제거될 때 실행되는 다른 함수를 반환할 수 있습니다. 구성 요소가 DOM에서 제거된 후 메모리 누수를 방지하기 위해 이벤트 리스너를 제거하고 있습니다.

onMount에 대해 주의할 사항

onMount 함수는 외부 모듈에서 호출할 수 있습니다(예: onMount 함수가 정의된 외부 모듈은 구성 요소 내에서 해당 함수를 호출할 때 실행됩니다.)

SSR(Server Side Rendering)에서 onMount 함수가 실행되지 않음

결론

수명 주기 메서드는 정말 유용하며 svelte를 사용하면 이러한 메서드를 구성 요소에 쉽게 추가할 수 있습니다.