0Pricing
Vue Academy · 강의

useFetch: 비동기 데이터 컴포저블

data, loading, error ref, 마운트 시 fetch, refetch 함수와 AbortController 정리를 다룹니다.

useFetch: 비동기 데이터 컴포저블은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

useFetch의 목표

비동기 데이터 가져오기는 어디에서나 반복됩니다. 로딩 상태 플래그, 오류 처리, 요청 자체를 매번 작성해야 합니다. useFetch는 이를 재사용 가능한 하나의 컴포저블로 묶어 data, loading, error를 반환합니다.

세 가지 반응형 참조

먼저 모든 비동기 요청의 상태를 나타내는 세 가지 반응형 참조를 만듭니다.

import { ref } from "vue";
function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
}

데이터 가져오기 루틴

loading을 전환하고 요청을 수행한 다음 결과를 저장하는 비동기 함수를 작성합니다. 다음에는 오류 처리를 개선하겠습니다.

async function execute() {
  loading.value = true;
  const res = await fetch(url);
  data.value = await res.json();
  loading.value = false;
}

try / catch / finally

요청을 감싸서 오류는 error에 저장하고, 성공 여부와 관계없이 finally에서 loading을 항상 초기화합니다.

async function execute() {
  loading.value = true;
  error.value = null;
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error("HTTP " + res.status);
    data.value = await res.json();
  } catch (e) {
    error.value = e;
  } finally {
    loading.value = false;
  }
}

onMounted에서 데이터 가져오기

컴포넌트가 마운트될 때 요청을 시작하여 데이터가 자동으로 로드되도록 합니다.

import { onMounted } from "vue";
onMounted(execute);

다시 가져오기 함수

소비자가 필요할 때 다시 로드할 수 있도록 execute를 refetch라는 이름으로 노출합니다. 데이터 변경 후나 다시 시도 버튼을 눌렀을 때 사용할 수 있습니다.

return { data, loading, error, refetch: execute };

정리를 위한 AbortController

요청 중에 컴포넌트가 마운트 해제되면, 이미 제거된 컴포넌트의 상태를 설정하지 않도록 가져오기를 중단해야 합니다. AbortController를 만들고 그 신호를 전달하십시오.

const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });

마운트 해제 시 중단하기

onUnmounted에서 진행 중인 요청을 취소합니다. catch에서 그 결과로 발생한 중단 오류는 무시하십시오.

import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());

완성된 useFetch

컴포저블을 완성하면 로딩, 오류, 다시 가져오기, 정리를 하나의 깔끔한 단위에서 처리할 수 있습니다.

function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const controller = new AbortController();
  async function execute() {
    loading.value = true; error.value = null;
    try {
      const res = await fetch(url, { signal: controller.signal });
      data.value = await res.json();
    } catch (e) {
      if (e.name !== "AbortError") error.value = e;
    } finally {
      loading.value = false;
    }
  }
  onMounted(execute);
  onUnmounted(() => controller.abort());
  return { data, loading, error, refetch: execute };
}

컴포넌트에서 사용하기

소비자는 세 가지 반응형 참조에 따라 화면을 렌더링합니다. 로딩 중에는 로딩 표시기를 보여 주고, 실패하면 오류 메시지를 표시하며, 그 외에는 데이터를 표시합니다.

const { data, loading, error } = useFetch("/api/posts");

템플릿 패턴

완전한 사용자 경험을 위해 템플릿에서 상태에 따라 분기합니다.

<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
  <li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>

빠른 확인

useFetch에서 AbortController의 역할은 무엇입니까?

복습

data, loading, error 반응형 참조를 노출하는 useFetch(url)을 만들었습니다. onMounted에서 try/catch/finally 패턴으로 데이터를 가져오고, refetch 함수와 onUnmounted에서 정리되는 AbortController도 추가했습니다.

자주 묻는 질문

“useFetch: 비동기 데이터 컴포저블” 강의는 무료인가요?

네 — “useFetch: 비동기 데이터 컴포저블” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“useFetch: 비동기 데이터 컴포저블”에서 뭘 배우나요?

data, loading, error ref, 마운트 시 fetch, refetch 함수와 AbortController 정리를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“useFetch: 비동기 데이터 컴포저블” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 좋은 컴포저블의 조건
  2. useCounter: 간단한 컴포저블
  3. useFetch: 비동기 데이터 컴포저블
  4. VueUse: 컴포저블 라이브러리
← Vue Academy(으)로 돌아가기