[Vue.js] 뷰 컴포넌트

컴포넌트란?

---

• 컴포넌트는 웹 애플리케이션의 UI 요소를 작은 블록으로 나누어 관리하는 기능이다. 화면을 구성할 때 내비게이션 바, 테이블, 리스트, 인풋 박스 등을 컴포넌트로 분리하여 사용할 수 있다. 이를 통해 코드의 재사용성을 높일 수 있고 유지보수가 용이해진다.

 

컴포넌트 등록 방식

---

Vue.js에서 컴포넌트는 두 가지 방식으로 등록할 수 있다.

1. 전역 컴포넌트: 여러 Vue 인스턴스에서 공통으로 사용할 수 있는 컴포넌트이다.
2. 지역 컴포넌트: 특정 Vue 인스턴스에서만 사용할 수 있는 컴포넌트이다.

<script>
  // 전역 컴포넌트 등록
  Vue.component('my-component', {
    template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
  });
  
  // 지역 컴포넌트 내용
  var cmp = {
    template: '<div>지역 컴포넌트가 등록되었습니다.</div>'
  }

  // 첫 번째 Vue 인스턴스 (지역 컴포넌트 사용)
  new Vue({
    el: '#app',
    components: {  // 'component'가 아니라 'components'로 수정해야 한다.
      'my-local-component': cmp
    }
  });

  // 두 번째 Vue 인스턴스 (전역 컴포넌트만 사용)
  new Vue({
    el: '#app2'
  });
</script>

 

결과

전역 컴포넌트

Vue.component('my-component', {...})로 등록된 컴포넌트는 전역 컴포넌트이다. 이 컴포넌트는 모든 Vue 인스턴스에서 사용할 수 있다.

지역 컴포넌트

첫 번째 인스턴스에서 components 속성을 통해 등록된 my-local-component는 지역 컴포넌트이다. 이 컴포넌트는 #app 인스턴스에서만 유효하며, 다른 인스턴스에서는 사용할 수 없다.

 

 

결론

---

Vue.js에서 컴포넌트는 UI를 작은 블록으로 나누어 관리할 수 있게 해준다. 전역 컴포넌트는 애플리케이션 전역에서 재사용 가능하고, 지역 컴포넌트는 특정 인스턴스에서만 유효하다. 컴포넌트를 적절히 분리하고 사용할 경우 코드의 유지보수성과 재사용성을 크게 향상시킬 수 있다.