[Vue3] 컴포넌트 동적 로드와 내용 교체: component 와 :is, defineAsyncComponent 활용

modal창의 기본 틀을 만들어 두고 내용을 교체하는 코드 입니다.

<template>
  <div id="actionModal" class="modal w-full bg-white">
    <div class="overlay" @click="$emit('close-modal')"></div>
    <div class="modal-card">
      <div class="modal-title">{{ contentsName }}</div>
      <div class="modal-contents">
        <component :is="loadComponent" @modal-command="receiveCallback"></component>
      </div>
      <div class="modalbtn-container">
        <button class="modalbtn" @click="$emit('ok-modal')">OK</button>
        <button class="modalbtn" @click="$emit('close-modal')">Close</button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
export default {
  name: 'Modal',
  props: {
    contentsName: {
      type: String,
      required: true
    }
  },
  computed: {
    loadComponent() {
      return defineAsyncComponent(() => import(`@/path/${this.contentsName}.vue`));
    }
  },
  methods: {
    receiveCallback(param) {
      // receiveModalCommand from modal content
    }
  }
};
</script>

 

component 태그와 defineAsyncComponent 그리고 computed 속성 내부에 있는 defineAsyncComponent는 동적으로 컴포넌트를 로드하고 내용을 교체하기 위한 Vue.js 3의 기능들입니다.

 

1.  component 태그

<component :is="loadComponent" @modal-command="receiveCallback"></component> 이 부분은 Vue의 동적 컴포넌트를 나타내는 태그입니다. :is 속성을 사용하여 동적으로 로드되는 컴포넌트를 지정할 수 있습니다.

2. defineAsyncComponent

return defineAsyncComponent(() => import('@/path/${this.contentsName}.vue')); defineAsyncComponent는 Vue.js 3에서 비동기적으로 컴포넌트를 로드하는 함수입니다. import를 사용하여 외부 컴포넌트를 동적으로 가져올 수 있습니다. 이를 통해 앱의 성능을 향상시키고 초기 로딩 시간을 줄일 수 있습니다. defineAsyncComponent는 콜백 함수를 인수로 받아 비동기적으로 컴포넌트를 로드하고, 로드가 완료되면 해당 컴포넌트를 반환합니다.

3. computed

computed 속성 내부에 defineAsyncComponent를 사용하는 이유는, defineAsyncComponent는 비동기적으로 컴포넌트를 로드하므로 초기에는 해당 컴포넌트가 로드되기 전까지는 loadComponent 속성의 값이 비어있습니다. 그러나 컴포넌트가 로드되고 나면 loadComponent의 값이 갱신되어 Vue가 자동으로 컴포넌트를 재렌더링합니다. 이를 통해 동적으로 컴포넌트를 로드하고 내용을 교체할 수 있는 기능을 구현할 수 있습니다.