7. Lifecycle

모든 컴포넌트는 Lifecylce을 갖고 있습니다. 몇몇 함수를 통해 Lifecycle마다 실행할 코드를 작성할 수 있습니다.

7-1. onMount

onMount는 컴포넌트가 DOM에 처음 랜더된 후 넘겨진 콜백함수를 실행합니다.

<script>
  import { onMount } from 'svelte';
  let photos = [];
  onMount(async () => {
    const res = await fetch("/tutorial/api/album");
    photos = await.res.json();
  });
</script>
...

1. Data를 fetch할 때 Server-Side-Rendering 때문에 script 맨 위에 쓰기보다 onMount 안에서 사용하는 것을 추천합니다.
2. onMount의 콜백함수가 함수를 return하면 컴포넌트가 destroy될 때 그 함수가 호출됩니다.

7-2. onDestroy

onDestroy는 컴포넌트가 destroy될 때 인자로 넘겨진 콜백함수를 실행합니다.

// utils.js
import { onDestroy } from 'svelte';

export function onInterval(callback, milliseconds) {
	const interval = setInterval(callback, milliseconds);
	onDestroy(() => {
		clearInterval(interval);
	});
}
// App.svelte
<sciprt>
  import { onInterval } from './utils.js';
  let counter = 0;
  onInterval(() => counter+=1, 1000);
</script>

1. onDestroy는 호출되는 위치는 상관없기 때문에 utils.js에 onInterval 함수로 setInterval과 함께 따로 빼놓고 필요한 컴포넌트마다 onInterval을 호출해서 사용할 수 있습니다.
2. setInterval의 경우 clearInterval하지 않으면 계속 실행되므로 onDestroy에서 clear되도록 코드를 작성합니다.

7-3. beforeUpdate and afterUpdate

beforeUpdate는 DOM이 업데이트 되기 직전에 인자로 넘겨준 콜백함수를 실행하고
afterUpdate는 DOM이 업데이트 된 직후에 인자로 넘겨준 콜백함수를 실행합니다.

// App.svelte
...
let div;
let autoscroll;
beforeUpdate(() => {
  const nowHeight = div.offesetHeight + div.scrollTop;
  autoscroll = div && (nowHeight) > (div.scrollHeight - 20);
afterUpdate(() => {
  if (autoscroll) div.scrollTo(0, div.scrollHeight);
}

1. Eliza라는 챗봇과의 대화를 구현한 예시입니다.
2. autoscroll은 자동 스크롤이 필요한가? 에 대한 boolean값을 갖고 있습니다.
3. 맨 밑까지 scroll되어있을 때 추가로 대화할 때 자동으로 맨 밑까지 스크롤되는 예제입니다.
4. 이렇게 엘리먼트의 scroll 위치같은 경우에 유용하게 사용할 수 있습니다.

7-4. tick

tick은 컴포넌트가 초기화될 때 뿐만 아니라 어디서든 실행할 수 있는 함수입니다.
컴포넌트의 상태를 업데이트할 때, DOM에 즉시 업데이트 되지 않고 다른 변경사항이 있나 감시하고있는 다음 microtask까지 기다립니다.
tick은 그것을 기다리지 않고 지금까지 변경된 상태가 DOM에 즉시 업데이트 되는 Promise를 반환합니다.

튜토리얼 7장 끝

참고문헌

Svelte Tutorial 7장 Lifecycle