Frontend Academy · 강의

비동기 컴포넌트와 Suspense

defineAsyncComponent으로 컴포넌트를 지연 로드하고, 로 감싸며, 컴포넌트 번들을 불러오는 동안 대체 콘텐츠를 표시합니다.

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

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

크기가 크거나 자주 사용하지 않는 컴포넌트(예: 관리자 패널, 차트 라이브러리)를 필요할 때 불러오면 초기 번들의 크기를 줄일 수 있습니다. Vue의 defineAsyncComponent가 동적 가져오기의 전체 생명 주기를 처리합니다.

defineAsyncComponent

컴포넌트로 확인되는 프라미스를 반환하는 로더 함수를 전달하십시오. Vue가 로딩, 오류, 시간 초과를 처리합니다.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(
  () => import('./Dashboard.vue')
);

// Use it like a normal component:
<template>
  <Dashboard />
</template>

비동기 동작 구성

불러오는 중 표시할 UI, 오류 UI, 불러오기 전 지연 시간, 시간 초과를 맞춤 설정하려면 옵션 객체를 전달하십시오.

const Dashboard = defineAsyncComponent({
  loader: () => import('./Dashboard.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorPanel,
  delay: 200,    // ms before showing loading
  timeout: 5000  // ms before showing error
});

번들러 청크 분할

동적 가져오기는 출력물에서 별도의 청크가 됩니다. 이름 지정과 사전 가져오기를 위해 Vite/webpack의 매직 주석을 사용하십시오.

const Dashboard = defineAsyncComponent(
  () => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);

라우트 수준의 지연 로딩

Vue Router는 라우트 정의에서 비동기 컴포넌트를 직접 지원합니다.

const routes = [
  { path: '/',          component: () => import('./Home.vue') },
  { path: '/dashboard', component: () => import('./Dashboard.vue') },
  { path: '/admin',     component: () => import('./Admin.vue') }
];

Suspense 컴포넌트

Vue의 실험적 <Suspense>는 하위 트리의 비동기 의존성이 대기 중인 동안 대체 화면을 렌더링합니다.

<template>
  <Suspense>
    <template #default>
      <Dashboard />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

비동기 setup()

setup()은 비동기 함수가 될 수 있으며, Vue는 렌더링하기 전에 함수가 완료될 때까지 기다립니다. Suspense 안에서 작동합니다.

<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>

<!-- Parent uses Suspense to handle the await -->

onErrorCaptured를 사용한 오류 처리

상위 컴포넌트에서 onErrorCaptured를 사용하면 비동기 컴포넌트나 비동기 setup()에서 발생한 오류를 포착할 수 있습니다.

import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.error('Caught:', err, info);
  return false; // prevent propagation
});

Suspense와 오류 경계 결합

비동기 컴포넌트 트리를 Suspense(로딩 처리)와 오류를 포착하는 상위 컴포넌트(오류 처리)로 함께 감싸십시오.

<template>
  <ErrorBoundary>
    <Suspense>
      <template #default><Dashboard /></template>
      <template #fallback><Spinner /></template>
    </Suspense>
  </ErrorBoundary>
</template>

Suspense는 실험적 기능

Vue 3.4 기준으로 <Suspense>는 여전히 실험적 기능으로 표시되어 있으며 API가 변경될 수 있습니다. 비동기 컴포넌트 자체(defineAsyncComponent)는 안정적이며 프로덕션에서 사용할 수 있습니다.

비동기 컴포넌트를 사용할 시점

적합한 대상은 라우트 컴포넌트, 관리자/설정 패널, 필요할 때 여는 모달, 용량이 큰 차트와 편집기입니다. 작은 컴포넌트나 모든 페이지에서 사용하는 컴포넌트에는 사용하지 마십시오. 이런 경우에는 다른 방식으로 분할하십시오.

빠른 확인

동적 가져오기를 지연 로딩 컴포넌트로 변환하는 Vue 3 함수는 무엇인가요?

복습: 비동기 컴포넌트와 Suspense

defineAsyncComponent는 동적 가져오기를 감싸 지연 로딩을 구현합니다. loadingComponent, errorComponent, 지연 시간, 시간 초과를 구성할 수 있습니다. 번들러는 별도의 청크를 생성합니다. component: () => import('...')를 사용하면 라우트 수준에서 지연 로딩을 구현할 수 있습니다. <Suspense>는 비동기 의존성이 해결되는 동안 대체 화면을 렌더링합니다(아직 실험적 기능입니다). 최상위 await를 사용하는 비동기 setup()은 Suspense 안에서 작동합니다. onErrorCaptured는 비동기 오류를 포착합니다.

자주 묻는 질문

“비동기 컴포넌트와 Suspense” 강의는 무료인가요?

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

“비동기 컴포넌트와 Suspense”에서 뭘 배우나요?

defineAsyncComponent으로 컴포넌트를 지연 로드하고, 로 감싸며, 컴포넌트 번들을 불러오는 동안 대체 콘텐츠를 표시합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“비동기 컴포넌트와 Suspense” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기