섹션 6: 컴포넌트 소개

인수

component 메서드는 두 개의 인수를 갖는다.

1. 첫 번째 인수는 식별자
   컴포넌트는 기본적으로 커스텀 HTML 요소(div와 같은)이다.
   커스텀 HTML 태그를 정의할 때는 항상 대시 기호를 포함한 식별자를 사용해야한다.
   (내장된 모든 HTML 요소는 한 단어로 되어있기 때문에 중복을 막기 위해)

2. 두 번째 인수는 createApp에 전달한 것과 같은 구성 객체이다.
   Vue 컴포넌트는 본질적으로 Vue 앱과 같다.
   말하자면 컴포넌트는 미니 앱이기 때문에 데이터나 메서드도 가질 수 있다.

※ 컴포넌트는 캡슐화되어있기 때문에 부모 앱에 동일한 methods와 data가 있어도 충돌이 발생하지 않는다.

템플릿

.mount()와 같이 HTML에 연결하지 않고
template 옵션을 추가한다.
template 옵션을 사용하면 Vue 앱과 메인 앱에서 해당 앱의 템플릿을 정의할 수 있다.(HTML 코드 정의)

그러나 브라우저가 인식할 수 있는 진짜 HTML 요소는 아니다.
Vue 앱이 제어하는 부분 밖에서 사용을 시도할 경우에는 아무 일도 일어나지 않고 브라우저가 무시한다.

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;
    },
  },
});

여러 Vue 앱 VS 여러 컴포넌트

HTML 페이지의 여러 독립적인 부분을 제어하는 경우 여러 Vue앱으로 작업하는 경우가 많다.(createApp()을 두 번 이상 호출)
반면 SPA를 구축하는 경우 일반적으로 하나의 "루트 앱"으로 작업하고(createApp()은 한 번만 사용)
대신 여러 컴포넌트로 사용자 인터페이스를 구축한다.

Vue 앱은 서로 독립적이므로 서로 통신할 수 없다.(비공식적인 방법은 있음)
컴포넌트는 컴포넌트 간에 데이터를 교환할 수 있는 특정 통신 메커니즘을 제공한다.
따라서 여러 컴포넌트를 포함하는 하나의 루트 앱으로 작업하는 경우 하나로 연결된 UI를 구축할 수 있다.