[Udemy Vue 완벽가이드 Section9] 118. 동적 컴포넌트 (component태그)

새로운 두 컴포넌트를 추가해보자. → ManageGoals.vue, ActiveGoals.vue

• ManageGoals.vue : 사용자가 새 강의 목표를 추가할 수 있는 컴포넌트.
• ActiveGoals.vue : 추가된 모든 활성화 목표를 볼 수 있는 컴포넌트.

 

두 컴포넌트 모두 script 태그도 추가하지 않을 예정이다. 기본 구성 객체를 export하지 않을거다. 비어있다면 굳이 export할 필요 없으므로.

 

App.vue에서 두 컴포넌트를 지역 컴포넌트로 등록하자.

 

여러 탭을 가진 컴포넌트를 구축한다고 하자. 여러 버튼이 있고, 해당 컴포넌트를 누르면 그 컴포넌트를 보여준다.

즉, 동시에 두 컴포넌트를 보여주지 않고, Active Goals, Manage Goals 중 한 컴포넌트만 보여준다.

이를 위해 App.vue 컴포넌트에 Active Goals, Manage Goals라는 버튼을 추가한다.

<template>
 <div>
  <the-header></the-header>
  <button>Active Goals</button>
  <button>Manage Goals</button>
 </div>
</template>

 

이제 버튼을 클릭하면 해당 컴포넌트가 보여야하고, 다른 컴포넌트는 보이지 않아야 한다.

 

먼저 추가 데이터를 App.vue에서 관리할 수 있다. DOM에서 사용하는 HTML 태그 이름을 넣는다.

data() {
  return {
    selectedComponent: "active-goals",
  };
},

 

그리고 method(setSelectedComponent)를 추가한다. 인수로 컴포넌트(cmp)를 받고, this.selectedComponent를 인수로 받는 값인 cmp로 설정한다.

그리고 버튼에 이 메서드(setSelectedComponent)를 바인딩한다.

<template>
  <div>
    <the-header></the-header>
    <button @click="setSelectedComponent('active-goals')">Active Goals</button>
    <button @click="setSelectedComponent('manage-goals')">Manage Goals</button>
    <active-goals v-if="selectedComponent === 'active-goals'"></active-goals>
    <manage-goals v-if="selectedComponent === 'manage-goals'"></manage-goals>
  </div>
</template>

<script>
import TheHeader from "./components/TheHeader.vue";
import ActiveGoals from "./components/ActiveGoals.vue";
import ManageGoals from "./components/ManageGoals.vue";

export default {
  components: {
    TheHeader: TheHeader,
    ActiveGoals,
    ManageGoals,
  },
  data() {
    return {
      selectedComponent: "active-goals",
    };
  },
  methods: {
    setSelectedComponent(cmp) {
      this.selectedComponent = cmp;
    },
  },
};
</script>

 

이렇게 탭작업을 하는게 새로운 내용이 아니다. 이미 배운 내용들이다. 이런식으로도 구축할 수 있지만, 컴포넌트가 더 많아진다면 v-if를 반복해서 사용해야하고, 귀찮다.

 

Vue에서는 이에 대한 대안 기능을 제공한다. → 동적 컴포넌트

Vue는 동적 컴포넌트를 위한 특별한 HTML 요소를 제공한다.  → 바로, Vue가 제공하는 'component 요소'

<component></component>

 

흥미로운 점은, 이 요소는 혼자서 동작하지 않는다. 화면에 아무것도 보여주지 않는다.

반드시 is라는 프로퍼티가 필요하다. 

is 프로퍼티는 component 요소에 정의한 컴포넌트 중, 어떤 컴포넌트들이 이 component 안에서 보여줄지 알려준다.

예를 들어, active-goals를 설정할 수 있다. 물론 아래와 같이 하드코딩을 하면 안된다. 하드코딩해서 항상 이 컴포넌트를 보여준다면, 그냥 <active-goals></active-goals> 이렇게 사용하면 되니깐.

<component is="active-goals"></component>

 

그 대신, v-bind 또는 축약어로 동적 바인딩을 하자. 값으로는 component HTML 태그를 갖는 'selectedComponent' data를 가리킨다.

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

 

selectedComponent는 active-goals로 초기화되어있지만, setSelectedComponent 메서드를 통해 'active-goals'와 'manage-goals'를 전환하게 된다.

 

**참고로, ActiveGoals.vue, ManageGoals.vue 컴포넌트는 지역 컴포넌트로 등록되어있어야한다.

 

이것으로 Vue에 component는 selectedComponent에 저장되는 태그로 'active-goals' 또는 'manage-goals'로 바뀌어야한다고 알려준다.

 

저장하면, active-goals, manage-goals 커스텀 HTML 태그를 쓴것과 화면은 동일하지만 v-if문을 사용하지 않고 더 간결하다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.