[do it! Vue.js 입문] 03-2. 뷰 컴포넌트

컴포넌트(Component)란?

조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)

- 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음

- 화면의 영역을컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리함

- 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있음

- 컴포넌트의 관계는 뷰에서 화면을 구성하는데 매우 중요한 역할을 함

- 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계해야함

- 컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사함

트리란?

트리란 컴퓨터 자료구조 중 하나로, 노드끼리의 연결이 부모-자식의 구조를 따름

전체적인 모양이 나무와 비슷해서 트리라고 불림

트리는 윈도우 파일 시스템 체계를 비롯하여 각종 데이터베이스에 활용되고 있고

뷰에서도 컴포넌트를 이해할 때 필요한 개념  

---

컴포넌트 등록하기

1) 전역 : 여러 인스턴스에서 공통으로 사용할 수 있음

2) 지역 : 특정 인스턴스에서만 유효한 범위를 가짐

전역 컴포넌트 등록

뷰 라이브러리를 로딩하고 나서, 접근 가능한 Vue 변수를 이용해 등록함

전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .componenet()를 호출해 수행하면 됨

Vue.component('컴포넌트이름', {
	//컴포넌트 내용
});

컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그(custom tag)이름을 의미

컴포넌트 내용 : template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있음

 

지역 컴포넌트 등록

Vue 변수가 아닌 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 됨

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

---

지역 컴포넌트와 전역 컴포넌트의 차이

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 componenets 속성으로 등록할 필요가 없음

한 번 등록하면 어느 인스턴스에서든지 사용 가능

 

지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야함