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

onMount 함수

Svelte의 생명주기 함수인 onMount()는 컴포넌트가 DOM에 추가될 때 호출됩니다. 컴포넌트가 DOM에 추가될 때, 최초 한 번만 실행해야 하는 작업을 작성할 수 있습니다.

 

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

- API 요청하여 데이터 가져오기

- 데이터 처리하기

- DOM 요소 접근하기(포커싱 처리 등...)

 

다음 예제들을 통해 onMount() 함수 사용 방법을 알아봅시다.

---

예제 1. API 요청

다음 예제는 jsonplaceholder API에서 제공하는 데이터를 가져와서 화면에 표현합니다.

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

  let toDoList = [];
  
  onMount(async () => {
    const url =
    'https://jsonplaceholder.typicode.com/todos/';

    let res = await fetch(url)
    let resData = await res.json();
    toDoList = resData;
  })
</script>

<ul>
  {#each toDoList as toDo}
    <li>{toDo.id}. {toDo.title}</li>
  {/each}
</ul>

onMount() 함수에서 async 키워드를 추가하면 await 구문을 사용할 수 있습니다. fetch() 함수를 사용하여 jsonplaceholder에 API 요청 후 응답받은 데이터를 json 형식으로 변환합니다.

 

json 형식으로 변환된 데이터를 toDoList 변수에 할당하고 반복문을 사용하여 화면에 표시합니다.

---

예제 2. 데이터 처리

화면에 표시되어야 하는 초기 데이터에 대해 특정 작업이 필요한 경우 onMount() 함수를 사용할 수 있습니다.

<script>
  import {onMount} from 'svelte';
	
  let names = [10, 20, 30];
  onMount(() => {
    names = names.map((item) => {
      return item * 10;
    })
  });
</script>

<ul>
  {#each names as name}
    <li>{name}</li>
  {/each}
</ul>

---

예제 3. DOM 요소 접근

text타입의 input 태그 또는 textarea 태그가 DOM에 추가될 때, 포커싱 처리해야 하는 작업이 필요할 수 있습니다. bind 지시자를 사용하여 DOM 요소를 참조 후 onMount() 함수에서 포커싱 처리합니다.

<script>
  import {onMount} from 'svelte';
	
  let strValue = '';    
  let inputBind;
  
  onMount(() => {
    inputBind.focus();
  });
</script>

<input type="text" bind:value={strValue} bind:this={inputBind} />

---

예제 4. onMount 함수의 return문

onMount() 함수의 return 문으로 함수가 전달되면, 해당 함수는 컴포넌트가 DOM에서 사라질 때 호출됩니다.

 

다음 예제는 "Child 컴포넌트 활성화" 버튼을 클릭하면 Child 컴포넌트가 활성화되면서 Child 컴포넌트의 onMount() 함수가 실행됩니다.

 

"Child 컴포넌트 비활성화" 버튼을 클릭하면 Child 컴포넌트의 onMount() 함수에 작성된 return문이 실행됩니다.

 

[부모 컴포넌트 - 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 {onMount} from 'svelte'; // svelte 패키지 import 
  
  onMount(() => {
    console.log('Child 컴포넌트 활성화')
    return () => {console.log('Child 컴포넌트 비활성화')}
  })
</script>

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