뷰 컴포넌트

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는

블록(화면의 특정 영역)을 의미한다. 컴포넌트를 활용하면

화면을 빠르게 구조화해서 일괄적인 패턴으로 개발을 할수있다.

이렇게 화면의 영역을 컴포넌트로 쪼개서 활용할수 있는 형태로

관리하면 나중에 코드를 다시 사용하기가 편하다. 또한 다른 사람들이

정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로

남이 작성한 코드를 직관적으로 이해할 수 있다.

먼저 간단하게 컴포넌트를 사용해보자

컴포넌트를 등록하는 방법은 전역과 지역의 두가지가 있다.

지역컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고

전역컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.

전역변수와 지역변수를 생각하면 이해가 쉬울것이다.

먼저 전역컴포넌트를 사용해보자.

전역컴포넌트는 뷰 라이브러리는 로딩하고 접근가능한 Vue변수를

이용해 등록한다. 전역컴포넌트를 모든 인스턴스에 등록하려면

Vue 생성자에서 .component()를 호출해 사용하면된다.

형식은 아래와 같다.

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

//컴포넌트 내용

}); 

8line 에서는 전역 컴포넌트를 표시한것이다.

그리고 13line에서 전역컴포넌트를 등록한것이다.

전역 컴포넌트가 화면에 나타나기까지의 처리과정은

먼저 뷰 라이브러리 가 파일을 로딩하고 뷰 생성자로 컴포넌트를

등록한다Vue.component(), 다음 인스턴스 객체를 생성하고

특정 화면 요소에 인스턴스를 부착한다. 그리고 인스턴스내용이 변환되는데

<first-component>가 <div>로 변환되는것이다.

그리고 변환된 화면 요소를 사용자가 확인할수 있다.

다음으로 지역컴포넌트를 사용해보자.

지역 컴포넌트는 전역 컴포넌트와 다르게 인스턴스에

components 속성을 추가하고 사용할 컴포넌트 이름과

내용을 설정하면 된다. 지역 컴포넌트 등록형식은 아래와 같다.

new Vue({

components: {

'컴포넌트 이름': 컴포넌트 내용

}

});

13line에 변수 cmp에는 화면에 나타낼 컴포넌트의 내용을 설정했다.

컴포넌트의 내용에 template, data, methods 등 여러 가지 속성이

들어갈 수 있지만 여기서는 간단히 template만 사용했다.

그리고 template 속성에 <div>태그 1개만 설정했다.

그리고 18line의 Vue 인스턴스에 components속성을 추가하고

컴포넌트 이름에는 second-component 를 컴포넌트의 내용에는

13line에서 정의한 cmp를 지정했다.

정상적으로 작성했다면 아래와같은 출력을 확인할 수 있다.