뷰 컴포넌트

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능입니다.
컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고
빠르게 화면을 제작할 수 있습니다.

컴포넌트 등록 및 실습

전역/지역 컴포넌트

<div id="app">
  <app-header></app-header>
  <app-content></app-content>
  <app-footer></app-footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 전역 컴포넌트 등록 방식
  // Vue.component('컴포넌트 이름,' 컴포넌트 내용);
  Vue.component('app-header', {
    template: '<h1>Header</h1>'
  });
  
  Vue.component('app-content', {
    template: '<div>content</div>'
  })
  new Vue({
    el : '#app',
    // 지역 컴포넌트 등록 방식
    components: {
      // '컴포넌트 이름': 컴포넌트 내용,
      'app-footer': {
        template: '<footer>footer</footer>'
      }
    }
  });
</script>

실무에서는 대부분 지역컴포넌트를 사용하고
플러그인, 라이브러리 컴포넌트만 전역으로 사용한다.

컴포넌트와 인스턴스와의 관계

<div id="app">
  <app-header></app-header>
  <app-footer></app-footer>
</div>

<div id="app2">
  <app-header></app-header>
  <app-footer></app-footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 전역 컴포넌트 등록 방식
  // Vue.component('컴포넌트 이름,' 컴포넌트 내용);
  Vue.component('app-header', {
    template: '<h1>Header</h1>'
  }); 

  new Vue({
    el : '#app',
    // 지역 컴포넌트 등록 방식
    components: {
      'app-footer': {
        template: '<footer>footer</footer>'
      }
    }
  });
  
  new Vue({
    el: '#app2'
  })

</script>

위와 같이 인스턴스를 추가하고 화면을 보면
전역컴포넌트로 등록한 app-header는 정상적으로 나오지만
#app1에서 지역컴포넌트로 등록한 app-footer는 #app2에서 오류처리된다.
지역컴포넌트는 해당 인스턴스 내에서만 작동한다.

실무에선 보통 하나의 인스턴스에 컴포넌트를 추가하는게 일반적이지만
예시를 통해 컴포넌트와 인스턴스와의 관계를 알아 보았다.