[javascript] Svelte에서 비동기 작업을 어떻게 처리하나요?

24 Nov 2023

javascript

Promise 사용: Promise를 사용하여 비동기 작업을 처리할 수 있습니다. Svelte 컴포넌트 내에서 비동기 작업을 수행하고 결과를 업데이트하는 예제 코드는 다음과 같습니다.

<script>
  let data = null;

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
  }
  
  fetchData();
</script>

<main>
  {#if data}
    {#each data as item}
      <p>{item}</p>
    {/each}
  {:else}
    <p>Loading...</p>
  {/if}
</main>

Svelte 라이프사이클 훅 사용: Svelte의 onMount 라이프사이클 훅을 사용하여 컴포넌트가 마운트되면 비동기 작업을 수행할 수 있습니다. 다음은 이를 이용한 예제 코드입니다.

<script>
  import { onMount } from 'svelte';
  
  let data = null;

  onMount(async () => {
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
  });
</script>

<main>
  {#if data}
    {#each data as item}
      <p>{item}</p>
    {/each}
  {:else}
    <p>Loading...</p>
  {/if}
</main>

컴포넌트 기반의 비동기 로딩: Svelte의 비동기 컴포넌트 기능을 사용하면 필요할 때 비동기적으로 컴포넌트를 로딩할 수 있습니다. 다음은 로딩 중인 상태를 보여주는 Loading 컴포넌트를 예제로 들어보겠습니다.

<script>
  import { onMount } from 'svelte';
  
  let data = null;
  let isLoading = true;

  onMount(async () => {
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
    isLoading = false;
  });
</script>

<main>
  {#if isLoading}
    <Loading />
  {:else}
    {#each data as item}
      <p>{item}</p>
    {/each}
  {/if}

  <script context="module">
    import Loading from './Loading.svelte';
  </script>
</main>

위의 예시 코드들은 Svelte에서 비동기 작업을 처리하는 몇 가지 방법을 보여주고 있습니다. 이를 통해 필요에 따라 적절한 방법을 선택하여 비동기 작업을 처리할 수 있습니다. 참고로, 예외 처리와 에러 핸들링에도 신경을 써야 하므로, 비동기 작업의 오류에 대한 처리도 함께 고려해야 합니다.