[Vue3] Dynamic component

동적 컴포넌트 (Dynamic Component)

컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있습니다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용합니다.

<component :is="currentTabComponent"></component>

위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있습니다.

• 등록된 컴포넌트의 문자열 이름 string
• 실제 가져온 컴포넌트 객체 object

<component :is=”...” />를 사용하여 여러 컴포넌트간 전환하면 컴포넌트의 마운트가 매번 해제됩니다. 이때 <KeepAlive> 내장 컴포넌트를 사용하여 “비활성 컴포넌트"들의 “활성” 상태를 유지할 수 있도록 강제할 수 있습니다.

다음은 vue3에서 script setup을 사용한 동적 컴포넌트 사용 예제입니다.

<script setup>
import { shallowRef } from 'vue';
// 각각의 컴포넌트를 불러와야 하며
import TabMenu1 from './TabMenu1.vue';
import TabMenu2 from './TabMenu1.vue';
import TabMenu3 from './TabMenu1.vue';

const menus = [
  { name: 'TabMenu1', comp: TabMenu1 },
  { name: 'TabMenu2', comp: TabMenu2 },
  { name: 'TabMenu3', comp: TabMenu3 }
]

/* 일반 ref를 사용하면 warning이 발생합니다.
  shallowRef를 사용해서 컴포넌트 정의를 반응형 객체로 전환하지 못하도록 중지합니다. */
const activeTab = shallowRef(menus[0])

function changeActiveTab(i) {
  activeTab.value = menus[i]
}
</script>

<template>
  <button
    v-for="(menu, index) in menus"
    :key="index"
    @click="changeActiveTab(index)">
    {{ menu.name }}
  </button>
  <component :is="activeTab.comp" /> // 컴포넌트 '이름'이 아닌 '컴포넌트'로 불러오기
</template>