55. Dynamic Components

링크open in new window

npm create vue@latest

프로젝트 링크

이 강의에서는 컴포넌트 파일에서 동적 컴포넌트(dynamic components)를 사용하는 방법을 배우게 됩니다.
요약하면 다음과 같습니다:

동적 컴포넌트는 다른 컴포넌트와 교체될 수 있는 컴포넌트로, 컴포넌트 간의 전환을 가능하게 합니다.
새 프로젝트에서 About과 Home 컴포넌트를 생성합니다.
App 컴포넌트에 드롭다운 메뉴를 만들어 사용자가 보고 싶은 컴포넌트를 선택할 수 있도록 합니다.
드롭다운 메뉴의 선택에 따라 component 컴포넌트를 사용하여 동적으로 컴포넌트를 로드합니다.
이 컴포넌트는 선택된 컴포넌트의 이름을 is 속성에 바인딩합니다.
동적 컴포넌트는 페이지에서 교체될 때마다 언마운트(unmounted)되며, 이로 인해 컴포넌트의 데이터가 초기 상태로 리셋됩니다.
컴포넌트를 메모리에 유지하고 싶을 경우 KeepAlive 컴포넌트를 사용할 수 있습니다. 이 컴포넌트는 내부의 컴포넌트를 활성 상태로 유지시켜 데이터를 보존합니다.
KeepAlive 컴포넌트를 사용하면 컴포넌트가 비활성화될 때 deactivated 생명주기 훅이 실행되고, 활성화될 때 activated 생명주기 훅이 실행됩니다.

이 강의를 통해 동적 컴포넌트 사용법, KeepAlive 컴포넌트의 사용법, 그리고 activated 및 deactivated 생명주기 훅의 사용법을 배웠습니다.

동적 컴포넌트를 사용함으로써 애플리케이션에서 다양한 UI 상호작용을 구현할 수 있으며, 특히 탭 컴포넌트나 메뉴 네비게이션 같은 기능을 효과적으로 구현할 수 있습니다.

App.vue

<script setup lang="ts">
   import Home from "@/components/Home.vue";
   import About from "@/components/About.vue";
   import { ref } from "vue";

   const componentName = ref('Home')

   const tabs: {[key: string]: unknown} = {
      Home,
      About,
   }
</script>

<template>
   <select v-model="componentName">
      <option value="Home">Home</option>
      <option value="About">About</option>
   </select>

   <KeepAlive>
      <component :is="tabs[componentName]"></component>
   </KeepAlive>
</template>

About.vue

<script setup lang="ts">
   import {onActivated, onDeactivated, onUnmounted} from "vue";

   onUnmounted(() => {
      console.log('About Component onUnmounted')
   })

   onActivated(() => {
      console.log('About Component onActivated')
   })

   onDeactivated(() => {
      console.log('About Component onDeactivated')
   })
</script>

<template>
   <h1>About Page</h1>
</template>

<style scoped>

</style>

Home.vue

<script setup lang="ts">
   import {onUnmounted, onActivated, onDeactivated} from "vue";

   onUnmounted(() => {
      console.log('Home Component onUnmounted')
   })

   onActivated(() => {
      console.log('Home Component onActivated')
   })

   onDeactivated(() => {
      console.log('Home Component onDeactivated')
   })
</script>

<template>
   <h1>Home Page</h1>
</template>

<style scoped>

</style>

# 55. Dynamic Components

55. Dynamic Components