Vue Component(뷰 컴포넌트)

JavaScript/Vue.js

Vue Component(뷰 컴포넌트)

devstep88 2021. 1. 6. 22:24

컴포넌트란?

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

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

이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 재사용하기가 훨씬 편리하다. 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있습니다.

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

컴포넌트 등록하기

컴포넌트를 등록하는 방법은 전역과 지역의 두가지가 있습니다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있습니다.

전역 컴포넌트 등록

전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록합니다.

전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행하면 됩니다.

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

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

태그 이름의 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 '모두 소문자'와 '케밥기법'을 따르지 않아도 된다.

그리고 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성합니다.

컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있습니다.

<html>
<head>
    <title>Vue Component Registration</title>
</head>
<body>
    <div id="app">
        <button>컴포넌트 등록</button>
        <my-component></my-component>
    </div>

    <script src="http://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
        Vue.compponent('my-component', {
            template: '<div>전역 컴포넌트가 등록되었습니다.</div>'
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

지역 컴포넌트 등록

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

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

컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의미하고, 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변환될 때의 내용을 의미합니다.

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

변수 cmp에는 화면에 나타낼 컴포넌트의 내용을 정의했습니다. 컴포넌트의 내용에 template, data, methods 등 여러가지 속성이 들어갈 수 있지만 여기서는 간단히 컴포넌트를 등록하는 코드만 보여주기 위해 template속성만 사용하였습니다. 그리고 template 속성에 <div> 태그 1개만 설정합니다. 아래 뷰 인스턴스에 components 속성을 추가하고 컴포넌트 이름에는 my-local-component를 컴포넌트 내용에는 앞에서 컴포넌트 내용을 정의한 변수 cmp를 지정합니다.

그리고 HTML에 <my-local-component>태그를 추가하여 컴포넌트를 화면에 나타냅니다.

<div id="app">
	<button>컴포넌트 등록</button>
    <my-local-component></my-local-component>
</div>