[Svelte] 라이프싸이클 - OnMount

컴포넌트 생성

Home폴더 하위에 Lifecycle 폴더를, 그 하위에 Lifecycle.svelte와 OnMount.svelte 컴포넌트를 생성해 준다.

<!--./src/Component/Home/Home.svelte-->
<script>
  import Lifecycle from './Lifecycle/Lifecycle.svelte';
</script>

<Lifecycle />

라이프싸이클

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

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

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

  

onMount

onMount함수는 화면에 컴포넌트가 마운트 될 때 실행되는 컴포넌트이다.

<!--./src/Component/Home/Lifecycle/Lifecycle.svelte-->
<script>
  import OnMount from './OnMount.svelte';
</script>

<div>
  <OnMount />
</div>

<!--./src/Component/Home/Lifecycle/OnMount.svelte-->
<script>
  import {onMount} from 'svelte';
  onMount(function () {
    console.log('마운트 됐어요~!');
  });
</script>

 

 Home컴포넌트 하위에 OnMount컴포넌트가 있으니 Home 페이지가 로딩되면 콘솔이 찍힌다.

 

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