[콜럼Vue스] 비동기 컴포넌트 (Async Component)

Vue에서 비동기 컴포넌트(Async Component)는 컴포넌트를 동적으로 로드하여, 필요한 시점에만 렌더링하는 기법임.

이 방법은 대규모 애플리케이션에서 초기 로딩 시간을 줄이고, 라우팅 또는 사용자 상호작용에 따라 필요할 때만 컴포넌트를 불러올 수 있게 해줌.

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

1. 초기 로딩 시간 최적화
   앱의 모든 컴포넌트를 한 번에 로드하는 대신, 사용자가 접근하는 순간에 로드함으로써 초기 로딩 시간을 줄일 수 있음.
2. 코드 스플리팅
   Webpack과 같은 번들러가 **비동기 컴포넌트를 분리된 청크(chunk)**로 만들어서, 필요한 파일만 네트워크로 로드하게 만듦.
3. 사용자 경험 개선
   대기 시간이 길어지는 부분에서는 로딩 스피너나 에러 핸들링을 통해 사용자 경험을 개선할 수 있음.

---

defineAsyncComponent 메서드의 옵션

defineAsyncComponent 메서드는 Vue 3에서 비동기 컴포넌트를 정의할 때 사용됨. 이 메서드는 다양한 옵션을 통해 컴포넌트의 로딩, 에러 처리, 로딩 지연 시간 등을 세밀하게 제어할 수 있음.

 

1. loader
   • 비동기적으로 컴포넌트를 불러오는 함수.
   • import()를 사용해 외부 컴포넌트를 동적으로 로드하는 용도로 주로 사용됨.

   const AsyncModal = defineAsyncComponent({
     loader: () => import('./AsyncModal.vue'),
   })
   
   

2. loadingComponent
   • 컴포넌트 로딩 중에 표시할 로딩 화면(스피너, 메시지 등)을 설정함.

   const AsyncComponent = defineAsyncComponent({
     loader: () => import('./MyComponent.vue'),
     loadingComponent: {
       template: '<div>로딩 중...</div>',
     },
   })
   
   

3. errorComponent
   • 로딩 실패 또는 네트워크 오류가 발생했을 때 표시할 컴포넌트를 지정함.

   const AsyncComponent = defineAsyncComponent({
     loader: () => import('./MyComponent.vue'),
     errorComponent: {
       template: '<div>에러가 발생했습니다.</div>',
     },
   })
   
   

4. delay (기본값: 200ms)
   • 로딩 컴포넌트가 표시되기 전 대기할 시간(밀리초 단위).
   • 네트워크 지연이 짧을 때 불필요한 로딩 UI가 깜빡이는 것을 방지함.

   const AsyncComponent = defineAsyncComponent({
     loader: () => import('./MyComponent.vue'),
     loadingComponent: {
       template: '<div>로딩 중...</div>',
     },
     delay: 300, // 300ms 후에 로딩 컴포넌트 표시
   })
   
   

5. timeout (기본값: Infinity)
   • 컴포넌트를 로드하는데 너무 오랜 시간이 걸릴 경우 타임아웃을 설정해 에러 컴포넌트를 표시함.
   • 타임아웃이 지나면 에러 컴포넌트가 표시되며, Infinity로 설정하면 제한이 없음.

   const AsyncComponent = defineAsyncComponent({
     loader: () => import('./MyComponent.vue'),
     errorComponent: {
       template: '<div>시간 초과로 로딩 실패</div>',
     },
     timeout: 5000, // 5초 후에 에러 컴포넌트 표시
   })
   
   

6. suspensible (기본값: true)
   • Vue의 Suspense 기능과 연동할지 여부를 설정함. true로 설정하면 해당 컴포넌트는 <Suspense> 컴포넌트 안에서 사용될 수 있음.
   • Suspense는 여러 비동기 컴포넌트를 동시에 로드하고, 준비가 완료될 때까지 전체 화면의 렌더링을 지연시키는 역할을 함.

   const AsyncComponent = defineAsyncComponent({
     loader: () => import('./MyComponent.vue'),
     suspensible: true,
   })
   
   

---