[vue3 공식문서 번역]Components.7.Async Components

Basic Usage

규모가 큰 어플리케이션에서, 앱을 더 작은 덩어이로 쪼개고 필요할때 서버에서 컴포넌트를 로드할 필요가 있다. 이걸 가능하게 하기 위해, 뷰는 defineAsyncComponent 함수가 있다:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resole, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
}(
// ... use 'AsyncComp' like a normal component

보이듯, defineAsyncComponent는 Promise를 리턴하는 loader function을 받는다. Promise의 resolve 콜백은 서버로부터 컴포넌트 정의를 회수했을 때 호출된다. load가 실패했을 때를 가리키는 reject(reason)을 호출할 수 있다.

 

ES module dynamic import 또한 Promise를 리턴한다. 그래서 대부분의 시간 defineAsyncComponent와 같이 사용한다. Vite나 webpack같은 번들러는 또한 문법을 제공해서, Vue SFCs로 import해서 사용할 수 있다:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => 
  import('./components/MyComponent.vue')
)

AsyncComp의 결과는 실제로 페이지에 렌더링 됐을 때 로더 함수를 오직 호출하는 wrapper 컴포넌트다. 또한, 이너 컴포넌트로모든 prop을 넘기기 때문에, 레이지 로딩이 일어나는 동안 비동기 래퍼를 사용해서 오리지널 컴포넌트를 원활하게 교체할 수 있다.

Loading and Error States

비동기적인 작업은 로딩과 에러 상태가 필연적으로 연겨로디어 있다 - defineAsyncComponent()는 추가적인 옵션을 통해 이 상태들을 핸들링 하는걸 지원한다.

const AsyncComp = defineAsyncComponent({
  // the loader function
  loader: () => import('./Foo.vue'),
  
  // 비동기적인 컴포넌트가 로딩되는 동안 사용할 컴포넌트 
  loadingComponent: LoadingComponent,
  // 로딩 컴포넌트를 보여주기 전에 딜레이. Default: 200ms.
  delay: 200,
  
  // 로드가 실패하면 사용하는 컴포넌트
  errorComponent: ErrorComponent,
  // 에러 컴포넌트는 만약 타임아웃이 제공되거나 실행될 때 표시 된다.
  // Default: Infinity
  timeout: 3000
})

만약 로딩 컴포넌트가 제공되면, 이너 컴포넌트가 로드 되는 동안 먼저 보인다. 로딩 컴포넌트가 보이기전에 기본 200ms 딜레이가 있다. - 빠른 네트워크에서, 인스턴트 로딩 상태가 너무 빨리 바껴서, 깜빡 거리는것처럼 보일 수 있기 때문이다.

 

에러 컴포넌트가 제공되면, Promise가 loader function이 reject됐을 때 리턴되면 나온다. 요청이 너무 오래걸릴 때 에러 컴포넌트를 보내기위해 타임아웃을 특정할 수도 있다.

 

Using with Suspense 

비동기 컴포넌트는 내장 컴포넌트인 <Suspense>로 사용될 수 있다. <Suspnse>와 비동기 컴포넌트의 상호작용은 dedicated chapter for <Suspense>에서 설명한다.