Vue #3 - 뷰 컴포넌트

컴포넌트란?

---

컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있느 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하다. 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다.

 

뷰에서는 웹 화면을 구성할 때 흔히 사용하는 내비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다. 

 

 

컴포넌트 등록하기

---

컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 더 쉽게 말하면 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰로 접근 가능한 모든 범위에서 사용할 수 있다.

 

전역 컴포넌트 등록

전역 컴포넌트는 뷰 라이브러를 로딩하고 나면 접근 간으한 Vue 변수를 이용하여 등록한다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행하면 된다. 형식은 아래와 같다.

 

Vue.component('컴포넌트 이름', {

});

 

전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 내용이 있다. 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미한다. 태그 이름의 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 '모두 소문자'와 '케밥 기법'을 따르지 않아도 된다.

지역 컴포넌트 등록

지역 컴포넌트 등록은 전역 컴포넌트 등록과 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다. 

 

new Vue({
  components: {
     '컴포넌트 이름': 컴포넌트 내용
  }
 });