Vue Academy · 강의

데이터 가져오기: useFetch와 useAsyncData

useFetch(), useAsyncData(), 서버 측과 클라이언트 측 fetch의 차이, refresh()와 대기 상태를 다룹니다.

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

Nuxt에서 데이터 가져오기

Nuxt는 SSR을 인식하는 데이터 가져오기 컴포저블을 제공합니다. 이 컴포저블은 렌더링 중 서버에서 실행되고 결과를 클라이언트에 전달하므로 중복 요청과 빈 콘텐츠가 잠시 표시되는 현상을 피할 수 있습니다.

useFetch 기초

useFetch는 URL 가져오기를 감쌉니다. 템플릿에서 직접 사용할 수 있는 반응형 data, pending, error 값을 반환합니다.

<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>

로딩 및 오류 표시

로딩 상태에는 pending을 사용하고, 실패에는 error를 사용합니다. 파싱된 JSON은 data에 저장됩니다.

<template>
  <p v-if="pending">Loading...</p>
  <p v-else-if="error">Failed to load</p>
  <ul v-else>
    <li v-for="p in data" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

사용자 지정 로직에 useAsyncData 사용하기

단순한 URL 이상이 필요할 때, 즉 여러 호출을 결합하거나 결과를 변환해야 할 때는 useAsyncData를 사용합니다. 고유 키와 데이터를 가져오는 함수를 전달합니다.

const { data } = await useAsyncData('posts', () => {
  return $fetch('/api/posts')
})

키가 중요한 이유

키는 요청을 중복 제거하고 캐시합니다. 같은 키를 사용하는 두 컴포넌트는 하나의 결과와 하나의 네트워크 호출을 공유하므로, 불필요한 데이터 가져오기를 방지합니다.

useFetch는 편의 기능입니다

내부적으로 useFetch(url)는 자동으로 생성된 키와 $fetch(url) 데이터 가져오기 함수를 사용하는 useAsyncData와 사실상 같습니다. 단순한 URL에는 useFetch를 사용하고, 사용자 지정 데이터 가져오기 함수에는 useAsyncData를 사용합니다.

server:false를 사용한 클라이언트 전용 실행

server: false를 설정하면 SSR 중 데이터 가져오기를 건너뛰고 클라이언트에서만 실행합니다. 서버 렌더링을 차단하지 않아야 하는 사용자별 데이터에 유용합니다.

const { data } = await useFetch('/api/me', {
  server: false
})

지연되는 비차단 데이터 가져오기

기본적으로 await는 데이터가 도착할 때까지 탐색을 차단합니다. lazy 옵션 또는 useLazyFetch를 사용하면 페이지를 즉시 렌더링하고, 데이터가 준비되는 대로 채울 수 있습니다.

const { data, pending } = useFetch('/api/posts', {
  lazy: true
})

refresh를 사용한 다시 가져오기

컴포저블은 필요할 때 데이터 가져오기를 다시 실행하는 refresh 함수를 반환합니다. 변형 작업이나 버튼 클릭 후에 사용할 수 있습니다.

const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }

반응형 쿼리 매개변수

query 또는 반응형 옵션을 전달하면 감시 중인 ref가 변경될 때 데이터 가져오기가 자동으로 다시 실행됩니다. 의존성이 변경될 때 다시 가져오도록 watch를 연결합니다.

const page = ref(1)
const { data } = await useFetch('/api/posts', {
  query: { page },
  watch: [page]
})

응답 변환하기

transform 옵션은 응답이 data에 도달하기 전에 형태를 바꿉니다. 필요한 필드만 선택하여 클라이언트로 전송되는 데이터 크기를 줄일 때 유용합니다.

const { data } = await useFetch('/api/user', {
  transform: (u) => ({ name: u.name, id: u.id })
})

빠른 확인

Nuxt 데이터 가져오기에 대한 지식을 확인해 보세요.

복습

Nuxt 데이터 가져오기를 배웠습니다:

useFetch는 반응형 데이터, 대기 상태, 오류를 반환합니다.
useAsyncData는 사용자 지정 로직을 위해 키와 데이터 가져오기 함수를 전달받습니다.
server:false는 클라이언트에서만 실행하고, lazy는 데이터 가져오기를 비차단 방식으로 만듭니다.
새로 고침 함수는 다시 가져오기를 실행하며, 감시는 의존성이 변경될 때 다시 실행합니다.

자주 묻는 질문

“데이터 가져오기: useFetch와 useAsyncData” 강의는 무료인가요?

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

“데이터 가져오기: useFetch와 useAsyncData”에서 뭘 배우나요?

useFetch(), useAsyncData(), 서버 측과 클라이언트 측 fetch의 차이, refresh()와 대기 상태를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“데이터 가져오기: useFetch와 useAsyncData” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기