이제 Component.svelte 파일 안에 컴포넌트 생성 시 호출되는 onMount, 파괴 시 호출되는 onDestory를 이용하여 코드를 다음과 같이 작성합니다.

REPL의 Component.svelte

<script>
    // 라이프사이클 함수 임포트 및 사용 선언
    import {afterUpdate, beforeUpdate, onDestroy, onMount} from "svelte";
    onMount(() => console.log("Component 생성됨")); //컴포넌트 생성 시 동작 정의
    onDestroy(() => console.log("Component 파괴됨")); //컴포넌트 파괴 시 동작 정의

    export let name; 
</script>

<p>
    hello {name}
</p>

onMount와 onDestroy를 사용하기 위해 import 문법을 사용했습니다. afterUpdate와 beforeUpdate는 10장 라이프사이클에서 살펴보기로 하고 이번에는 onMount, onDestroy의 콜백 함수만 간단하게 구현하겠습니다. 콘솔에 생성과 파괴를 표시했습니다.

그리고 상위 컴포넌트로부터 값을 주입받기 위해서 export let name;으로 선언했고, 주입받은 name 프로퍼티의 값은 p 엘리먼트 안에서 {name}으로 출력했습니다.