[Udemy Vue 완벽가이드 Section7] 87. 컴포넌트 추가하기

이제 첫 컴포넌트를 추가해보자.

 

App.vue가 우리의 메인 Vue 앱이다.
(Vue 컴포넌트는 Vue 인스턴스이기도 하다.)

Vue는 Vue 앱이 있고, Vue 컴포넌트가 있다.

- 모든 컴포넌트는 미니앱과 같으며, 여러 컴포넌트를 하나의 앱으로 합칠 수 있다. 그리고 이러한 미니앱, 즉 컴포넌트는 서로 통신할 수 있고 여러 다른 컴포넌트를 조합해서 복잡한 사용자 인터페이스를 구축할 수 있다.

 

# components 폴더

- convention인데, src폴더에 새로운 폴더를 만들어 컴포넌트를 넣는다. 이 폴더명을 components라고 한다.

- 이렇게 작성해서 단순한 Vue앱이 아닌, 컴포넌트임을 확실히 표시할 수 있다.

 

- 이 components 폴더에 FriendContact.vue 파일을 추가하여, 생성하려는 friend-contact 컴포넌트를 넣어둔다.

 

파일 이름을 보면, App.vue와 마찬가지로 파일 안에 무엇이 있는지 확실히 표시한다.

- 먼저, components 폴더에 있으니 당연히 컴포넌트라는걸 알 수 있다.

- 파일명을 보면, FriendContact를 표시하는 컴포넌트라는걸 알 수 있다. 이름은 마음대로 해도 된다. 그냥 Contact라고 해도 된다.

- 일명 kebab-case라고 불리는 friend-contact.vue라고 파일명을 정해도 괜찮다. 그러나 PascalCase가 더 보편적이다.

**명명법은 일반적으로 kebab-case, PascalCase, camelCase 중 하나로 따른다.

- PascalCase : 여러단어를 이어서 한 단어로 구성하는 방법. 모든 단어의 시작을 대문자로 쓰고 여러 단어를 이으면 된다.

 

FriendContact.vue파일은 Vue 파일이므로, 여기에 template 영역을 생성할 수 있다.

예전 컴포넌트 섹션에서는, template키를 추가해서 문자열로 이 컴포넌트의 HTML 코드를 정의했다. ↓

const app = Vue.createApp({});

app.component("friend-contact", {
  template: `
    <li>
    <h2>{{ friend.name }}</h2>
    <button @click="toggleDetails()">
      {{ detailsAreVisible ? 'Hide' : 'Show'}} Details
    </button>
    <ul v-if="detailsAreVisible">
      <li><strong>Phone:</strong> {{ friend.phone }}</li>
      <li><strong>Email:</strong> {{ friend.email }}</li>
    </ul>
  </li>
    `,
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "01234 5678 991",
        email: "manuel@localhost.com",
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    },
  },
});

app.mount('#app');

 

 

이제 더이상 그렇게 할 필요가 없다.

FriendContact.vue파일에는 template 영역이 있다. 이게 바로 .vue파일을 사용하는 이유.

이런 컴포넌트를 생성하고 template을 정의하는 일을 훨씬 편리하게 해준다. 더이상 template키를 추가해서 JavaScript 문자열로 작업을 할 필요가 없다.

이제 <template>에 컴포넌트 마크업을 생성해보자.

그리고 script에서 default 객체를 export한다. 여기서 export되는 이 default object가 컴포넌트의 구성객체가 된다.

앱 컴포넌트는 미니 Vue앱과 같다는 점을 기억해야한다. 따라서 같은 구성객체를 필요로하고, 당연히 export 해야한다.

<template>
 <li>
  <h2>{{ friend.name }}</h2>
  <button @click="toggleDetails">{{ detailsAreVisible? 'Hide' : 'Show' }}Details</button>
  <ul v-if="detailsAreVisible">
   <li><strong>Phone:</strong>{{ friend.phone }}</li>
   <li><strong>Email:</strong>{{ friend.email }}</li>
  </ul> 
 </li>
</template>
<script>
 export default {
  data(){
   return {
     detailsAreVisible: false,
     friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "0123 45678 90",
        email: "manuel@localhost.com",
     }
   }
  methods: {
   toggleDetails(){
     this.detailsAreVisible = !this.detailsAreVisible;
   },
  }
 },
}

</script>

 

 

이렇게 컴포넌트가 완성되었다.  이제 이걸 배운대로 컴포넌트 등록하면 된다.

main.js에서 component 메서드를 호출할 수 있다.

// main.js
import { createApp } from "vue";

import App from "./App.vue";
import FriendContact from "./components/FriendContact.vue";

const app = createApp(App);

app.component("friend-contact", FriendContact);
//auto completion이 된다. component 메서드가 있다고 IDE가 제안한다. 그리고 어떤 인수를 제공해야하는지도 알려주고 있다.
//첫번째 인수로 friend-contact라는 name을 제공.
//두번째 인수로는 이 컴포넌트의 구성객체가 들어간다.
//이는 다른 파일에 위치하므로, import한다.

app.mount("#app");

이제 FriendContact 컴포넌트를 사용할 수 있다. 이건 FriendContact.vue 파일에서 내보내는 JS 객체이다.

 

이렇게 앱에서 friend-contact 컴포넌트를 사용할 수 있게 되었다. 즉, 커스텀 HTML 요소를 사용할 수 있다.

App.vue에서 friend-contact 컴포넌트를 원하는 만큼 추가할 수 있다.

 

 

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