[TIL] Vue - 비동기 컴포넌트

비동기 컴포넌트 Async Component

프로젝트의 규모가 커질수록 앱을 작은 조각들로 나누어 두고 불러와야할 것들만 불러와야 효율적이다.
필요한 부분, 즉 서버에서 필요한 컴포넌트만 비동적기적으로 불러와 사용할 수 있도록 도와주는 기능이 바로 비동기 컴포넌트 Async Component 이라고 하며 defineAsyncComponent 함수를 통해 구현할 수 있다.

Promise 를 사용

import { defineAsyncComponent } from 'vue';

const AsyncComp = defineAsyncComponent(() => {
  	return new Promise((resolve, reject) => {
    	//...컴포넌트 불러오기
      	if(/* 불러오기 성공 */){
           resolve(/* 불러온 컴포넌트 */)
    	}else{
           reject(/* 실패 메시지 */)
    	}
    })
});

Promise 를 반환하는 로더 함수를 사용하며, 로드가 성공한다면 resolve 콜백을 호출해서 서버에서 가져온 정의되어 있는 컴포넌트를 반환하고, 로드가 실패한다면 reject 를 호출할 수 있따.

import 를 사용

import { defineAsyncComponent } from 'vue';

const AsyncComp = defineAsyncComponent(() => {
  	import('./AsyncComp.vue')
});

import 구문을 사용하여 컴포넌트를 비동기적으로 로딩할 수 있다. import 자체가 Promise 를 반환하므로 defineAsyncComponent 가 이를 활용하여동적으로 모듈을 가져와 컴포넌트를 로딩한다.

Promise 를 사용한다면 로딩 및 실패 상황에 대한 명시적인 제어가 가능하며,
import 구문 자체가 Promise 를 반환하므로 별도의 명시적인 Promise 를 생성할 필요가 없어서 간결하고 편리하다. 그치만 전자가 복잡한 로딩 로직일 경우 더 많은 유연성을 제공할 수 있다.

두번째 인자 옵션 설정

const AsyncComp = defineAsyncComponent(
  () => import('./AsyncComponent.vue'),
  {
    loadingComponent: LoadingComponent, // 로딩 중에 표시할 컴포넌트
    errorComponent: ErrorComponent,     // 로딩 실패 시 표시할 컴포넌트
    delay: 200,                         // 로딩 중 컴포넌트 표시를 지연시킬 시간 (ms)
    timeout: 3000,                      // 로딩이 실패할 때까지 대기할 시간 (ms)
  }
);

두번째 인자로 로딩 중이거나 실패했을 때 보여줄 컨텐츠의 정보들을 정의함으로써 비동기적으로 로딩되는 컴포넌트에 대한 더 많은 제어가 가능하다.