[콜럼Vue스] 동적 컴포넌트 (Dynamic Component)

동적 컴포넌트는 동일한 위치에 여러 컴포넌트를 표현해야 할 때 유용함

동적 컴포넌트는 <component> 태그를 이용해, is 속성에 어떤 컴포넌트를 렌더링할지 동적으로 결정할 수 있음

탭 인터페이스와 같이 화면 전환이 필요한 UI를 구현할 때 자주 사용

---

동적 컴포넌트의 기본 사용법

예제 - 동적 탭 화면 구현

1. 탭에 해당하는 컴포넌트 생성

<!-- src/components/CoralSeaTab.vue -->
<template>
  <div class="tab">
    <h1>산호해 해전에 대해</h1>
  </div>
</template>

<script>
export default {
  name: "CoralSeaTab"
};
</script>

동일한 방식으로 LeyteGulfTab.vue와 MidwayTab.vue 컴포넌트를 작성하되, 헤더 내용만 다르게 변경

---

2. App.vue에서 동적 컴포넌트 사용

<!-- src/App.vue -->
<template>
  <div class="header">
    <h1 class="headerText">태평양 전쟁의 해전</h1>
    <nav>
      <ul class="nav nav-tabs">
        <li v-for="tab in tabs" :key="tab.id" class="nav-item">
          <a style="cursor:pointer;" class="nav-link" 
             :class="{ active: tab.id === currentTab }"
             @click="changeTab(tab.id)">
            {{ tab.label }}
          </a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="container">
    <component :is="currentTab"></component>
  </div>
</template>

<script>
import CoralSeaTab from './components/CoralSeaTab.vue';
import LeyteGulfTab from './components/LeyteGulfTab.vue';
import MidwayTab from './components/MidwayTab.vue';

export default {
  name: 'App',
  components: { CoralSeaTab, LeyteGulfTab, MidwayTab },
  data() {
    return {
      currentTab: 'CoralSeaTab',
      tabs: [
        { id: 'CoralSeaTab', label: '산호해 해전' },
        { id: 'MidwayTab', label: '미드웨이 해전' },
        { id: 'LeyteGulfTab', label: '레이테만 해전' }
      ]
    };
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;
    }
  }
};
</script>

<style>
.header {
  padding: 20px;
}
.headerText {
  padding: 20px;
}
.tab {
  padding: 30px;
}
</style>

---

동적 컴포넌트와 캐싱 (Keep-Alive)

동적 컴포넌트는 탭을 전환할 때마다 새로 렌더링 됨

만약 컴포넌트가 정적 콘텐츠를 포함하고 있고 매번 재렌더링할 필요가 없다면 <keep-alive> 태그를 사용해 컴포넌트를 캐싱할 수 있음

<!-- src/App.vue -->
<template>
  <div class="container">
    <keep-alive include="CoralSeaTab,MidwayTab">
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

---

주요 고려 사항

 

• 동적 컴포넌트 전환
  • 탭을 클릭할 때마다 currentTab 값에 맞는 컴포넌트가 렌더링된다.
  • 탭 전환 시 다른 컴포넌트가 <component> 위치에 나타난다.
• 캐싱된 컴포넌트의 상태 유지
  • 캐싱된 컴포넌트는 처음 렌더링된 상태를 유지하며, 시간이 변하지 않는다.
• 예외 처리
  • 만약 currentTab 값이 비어 있거나 잘못된 경우, 아무것도 렌더링되지 않는다.

---

동적 컴포넌트는 동일한 위치에 여러 컴포넌트를 표시해야 할 때 매우 유용하다. 이 기능을 사용하면 UI를 보다 유연하게 구성할 수 있으며, 필요에 따라 캐싱을 적용해 성능 최적화도 가능하다.

• <component> 태그와 is 속성을 사용해 어떤 컴포넌트를 렌더링할지 결정한다.
• <keep-alive>를 통해 불필요한 렌더링을 방지하고 성능을 최적화할 수 있다.

이러한 동적 컴포넌트와 캐싱 기능은 탭 인터페이스, 대화형 모듈 등 다양한 상황에서 강력한 도구로 활용될 수 있다.