Svelte 구성 요소 수명 주기 후크

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 Svelte 구성 요소의 수명 주기 후크를 살펴보겠습니다.

구성 요소 수명 주기

모든 Svelte 구성 요소에는 수명 주기가 있습니다. 생성될 때 시작되고 소멸될 때 끝납니다.

수명 주기의 중요한 순간에 코드를 실행할 수 있는 몇 가지 기능이 있습니다.

가장 많이 사용되는 것은 onMount  입니다. 컴포넌트가 DOM에 처음 렌더링된 후에 실행됩니다.

다음과 같이 구성 요소에 onMount 처리기를 추가할 수 있습니다.

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

  let joke = { value: { joke: "" } };

  onMount(async () => {
    const res = await fetch(`https://api.icndb.com/jokes/20`);
    joke = await res.json();
  });
</script>

<p>{joke.value.joke}</p>

위의 코드는 구성 요소가 로드될 때 농담을 받기 위해 Chuck Norris API를 호출합니다.

그런 다음 로드된 후 표시합니다.

onDestroy

onDestroy의 콜백은 컴포넌트가 파괴될 때 호출됩니다.

구성 요소가 onDestroy의 콜백으로 들어갈 수 있을 때 실행되는 정리 코드 및 기타 모든 것.

예를 들어 다음과 같이 작성할 수 있습니다.

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

  let seconds = 0;
  const interval = setInterval(() => seconds++, 1000);

  onDestroy(() => clearInterval(interval));
</script>

<p>Seconds: {seconds}</p>

위의 코드에서 setInterval을 호출하고 interval 값으로 설정한 간격 ID 개체를 반환합니다.

그런 다음 구성 요소가 파괴될 때 clearInterval을 호출하여 interval 콜백에서 clearInterval을 onDestroy으로 전달하여 메모리에서 간격 개체를 지웁니다.

업데이트 전과 후업데이트

beforeUpdate은 DOM이 업데이트되기 직전에 실행됩니다.
afterUpdate은 DOM이 데이터와 동기화되면 코드를 실행하는 데 사용됩니다.

예를 들어 div가 창 높이를 넘었을 때 div의 맨 아래로 스크롤하려는 경우 다음 코드를 작성할 수 있습니다.

<script>
  import { beforeUpdate, afterUpdate } from "svelte";
  let div;
  let autoscroll;
  let arr = [];
  setTimeout(() => {
    arr = new Array(100).fill("foo");
  }, 100);

  beforeUpdate(() => {
    autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
  });

  afterUpdate(() => {
    if (autoscroll) {
      window.scrollTo(0, div.scrollHeight);
    }
  });
</script>

<div bind:this={div}>
{#each arr as a}
<p>{a}</p>
{/each}
</div>

코드:

div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20

div의 높이가 화면에 표시되지 않는 높이를 포함하는 스크롤 높이보다 큰지 확인합니다.

그런 다음 afterUpdate 콜백에서 위의 부울에서 반환된 오버플로가 있는 경우 div의 맨 아래로 스크롤할 수 있습니다.

진드기

tick은 보류 중인 상태 변경 사항이 DOM에 적용되는 즉시 해결되는 약속을 반환하는 함수입니다.

구성 요소 상태가 Svelte에서 무효화되면 DOM을 즉시 업데이트하지 않습니다. 적용해야 할 변경 사항이 있는지 확인하기 위해 다음 마이크로 작업까지 기다립니다.

이렇게 하면 업데이트를 일괄 처리할 수 있습니다.

텍스트 영역에서 텍스트 범위를 선택하고 탭 키를 눌러 대소문자를 전환하면 현재 선택이 지워지고 커서가 끝으로 이동합니다.

다음 코드를 작성하여 Textarea에서 탭 키를 누른 후에도 선택을 유지할 수 있습니다.

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

let text = "";
  async function handleKeydown(event) {
    if (event.which !== 9) return;
    event.preventDefault();

    const { selectionStart, selectionEnd, value } = this;
    const selection = value.slice(selectionStart, selectionEnd);

    const replacement = /[a-z]/.test(selection)
      ? selection.toUpperCase()
      : selection.toLowerCase();

    text =
      value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
    await tick();
    this.selectionStart = selectionStart;
    this.selectionEnd = selectionEnd;
  }
</script>

<textarea bind:value={text} on:keydown={handleKeydown}></textarea>

위의 코드에는 탭 키가 눌렸는지 확인하기 위한 handleKeydown이 있습니다.
text을 이전과 동일한 내용으로 설정하여 텍스트가 변경되지 않도록 합니다.

그렇다면 선택을 유지하기 위해 selectionStart이 호출된 후 selectionEnd 및 tick을 설정합니다.

결론

수명 주기 메서드를 사용하여 수명 주기 단계에서 원하는 코드를 실행할 수 있습니다.

구성 요소가 로드될 때 하나, 구성 요소가 파괴될 때 하나, DOM 업데이트용으로 하나, 구성 요소 상태가 업데이트될 때용 하나가 있습니다.