Vue Academy · 강의

defineAsyncComponent를 활용한 비동기 컴포넌트

defineAsyncComponent(), loadingComponent, errorComponent와 delay 및 timeout 옵션을 익힙니다.

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

비동기 컴포넌트를 사용하는 이유

defineAsyncComponent를 사용하면 컴포넌트를 지연 로드할 수 있습니다. 컴포넌트가 처음 렌더링될 때만 해당 코드가 가져와집니다.

이를 통해 라우트 수준 및 컴포넌트 수준의 코드 분할이 가능해져 초기 번들의 크기가 줄고 첫 화면 렌더링이 빨라집니다.

로더 함수 형식

가장 간단한 사용법은 동적 import()를 반환하는 로더 함수를 전달하는 것입니다. Vite/webpack은 이 가져오기를 자동으로 별도의 청크로 코드 분할합니다.

<script setup>
import { defineAsyncComponent } from 'vue'

const SettingsModal = defineAsyncComponent(() =>
  import('./SettingsModal.vue')
)
</script>

<template>
  <SettingsModal v-if="showSettings" />
</template>

옵션 객체 형식

더 세밀하게 제어하려면 옵션 객체를 전달합니다. 주요 필드는 다음과 같습니다.

로더 — 동적 가져오기 함수
loadingComponent — 로딩 중에 표시되는 컴포넌트
errorComponent — 로딩에 실패했을 때 표시되는 컴포넌트
지연 / 타임아웃 — 시간 제어 옵션

import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

delay: 회전 표시기가 잠깐 나타나는 현상 피하기

delay 옵션(기본값 200ms)은 Vue가 loadingComponent를 표시하기 전에 기다리는 시간입니다. 청크가 지연 시간보다 빨리 로드되면 회전 표시기가 전혀 나타나지 않습니다.

delay: 0으로 설정하면 로딩 상태를 즉시 표시할 수 있습니다.

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

timeout: 느린 로드 실패 처리

timeout 옵션은 기다릴 최대 시간을 설정합니다. 로더가 timeout밀리초 안에 해결되지 않으면 errorComponent가 표시되고 오류가 기록됩니다.

기본적으로 타임아웃은 없으므로 로드가 무기한 계속 기다립니다.

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

onError 콜백

로더가 거부될 때 onError 처리기가 실행됩니다. 이 처리기는 오류, 재시도 함수, 실패 함수, 현재 시도 횟수를 받습니다.

네트워크가 불안정할 때 재시도 횟수를 제한하는 로직을 구현하는 곳입니다.

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

재시도와 실패 결정

onError 안에서는 retry() 또는 fail() 중 정확히 하나를 호출해야 합니다. 둘 다 호출하지 않아도 실패로 처리됩니다. 일반적인 전략은 네트워크 오류는 몇 번 재시도하고, 재시도로 해결할 수 없는 구문 오류나 청크 오류는 즉시 실패시키는 것입니다.

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

Suspense와 함께 사용하기

비동기 컴포넌트가 Suspense 경계 안에 있으면 경계가 대신 로딩 상태를 제어합니다. 이 경우 컴포넌트 자체의 loadingComponent는 무시되고 Suspense의 대체 콘텐츠가 우선 적용됩니다.

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

디버깅을 위한 이름 있는 청크

매직 주석을 사용하여 생성되는 청크의 이름을 지정할 수 있습니다. 그러면 네트워크 요청과 번들 보고서를 더 쉽게 읽을 수 있습니다.

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

비동기 컴포넌트와 속성

비동기 컴포넌트는 일반 컴포넌트와 똑같이 속성을 받고 이벤트를 발생시킵니다. 실제 컴포넌트가 해결되면 Vue가 모든 내용을 투명하게 전달하므로 호출 위치를 변경할 필요가 없습니다.

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

모범 사례: 첫 화면 영역은 신중하게 지연 로드하기

화면 밖에 있거나 상호작용 뒤에 표시되거나(모달, 탭), 거의 사용되지 않는 컴포넌트를 지연 로드하세요. 첫 화면의 핵심 사용자 인터페이스는 지연 로드하지 않는 것이 좋습니다. 추가 왕복 요청 때문에 사용자가 느끼는 성능이 저하될 수 있습니다.

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

빠른 확인

defineAsyncComponent에 대한 이해도를 확인해 보세요.

복습

defineAsyncComponent를 사용한 비동기 컴포넌트 로딩을 배웠습니다.

로더 형식은 코드 분할을 위해 동적 import()를 반환합니다.
옵션 형식은 loadingComponent, errorComponent, delay, timeout을 추가합니다.
delay는 회전 표시기가 잠깐 나타나는 현상을 피하고, timeout은 느린 로드를 실패 처리합니다.
onError(error, retry, fail, attempts)는 재시도 또는 실패 로직을 구현합니다.
Suspense 안에서는 경계의 대체 콘텐츠가 로딩 화면을 대신합니다.

자주 묻는 질문

“defineAsyncComponent를 활용한 비동기 컴포넌트” 강의는 무료인가요?

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

“defineAsyncComponent를 활용한 비동기 컴포넌트”에서 뭘 배우나요?

defineAsyncComponent(), loadingComponent, errorComponent와 delay 및 timeout 옵션을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“defineAsyncComponent를 활용한 비동기 컴포넌트” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기