컴포넌트
컴포넌트(component)는 조합하여 화면을 구성할 수 있는 블록(화면 특정 영역)을 의미한다.
컴포넌트를 활용하면 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발을 할 수 있다.
화면영역을 컴포넌트로 쪼개서 개발을 하면 코드의 재활용을 할 수 있어서 다시 사용하기가 편리하다.
컴포넌트 등록
컴포넌트의 종류는 전역 컴포넌트와 지역 컴포넌트 두 가지로 구분할 수 있다.
지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가지고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.
전역 컴포넌트 등록
전역 컴포넌트를 등록하기 위해서는 .component()를 호출하여 수정한다.
Vue.component('컴포넌트 이름', {
//컴포넌트 내용
});컴포넌트 이름은 template 속성에서 사용할 수 있는 HTML 사용자 정의 태그이름을 의미한다.
컴포넌트 내용에는 HTML요소로 변환 될 때 표시될 속성들을 작성하면 된다.
해당 내용에는 template, data, methods등 인스턴스 옵션 속성을 정의할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component>
</div>
</body>
<script>
Vue.component("my-component", {
template: "<div>전역 컴포넌트가 등록되었습니다.</div>",
});
new Vue({
el: "#app",
});
</script>
</html>
지역 컴포넌트
지역 컴포넌트는 전역 컴포넌트와는 다르게 인스턴스 내부의 components 속성을 사용하여 등록할 컴포넌트를 명시한다.
전역 컴포넌트와 마찬가지로 사용할 태그이름을 지정하고 컴포넌트 내용에 HTM요소로 변환될 내용을 입력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<local-component></local-component>
</div>
</body>
<script>
const localComponent = {
template: "<div>지역 컴포넌트가 등록되었습니다.</div>",
};
new Vue({
el: "#app",
components: {
"local-component": localComponent,
},
});
</script>
</html>
전역 컴포넌트 & 지역 컴포넌트 차이
전역 컴포넌트와 지역 컴포넌트의 차이는 유효 범위에서 차이가 난다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<global-component></global-component>
<local-component></local-component>
</div>
</body>
<script>
const localComponent = {
template: "<div>지역 컴포넌트가 등록되었습니다.</div>",
};
Vue.component("global-component", {
template: "<div>전역 컴포넌트가 등록되었습니다.</div>",
});
new Vue({
el: "#app",
components: {
"local-component": localComponent,
},
});
</script>
</html>
이렇게 확인 하면 무슨 차이가 있는지 알기 힘든 것이 사실이다.
확실히 알 수 있는 방법은 인스턴스를 하나 더 추가해보면 확실히 알 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<global-component></global-component>
<local-component></local-component>
</div>
<hr />
<div id="app2">
<h3>두 번째 인스턴스 영역</h3>
<global-component></global-component>
<local-component></local-component>
</div>
</body>
<script>
const localComponent = {
template: "<div>지역 컴포넌트가 등록되었습니다.</div>",
};
Vue.component("global-component", {
template: "<div>전역 컴포넌트가 등록되었습니다.</div>",
});
new Vue({
el: "#app",
components: {
"local-component": localComponent,
},
});
new Vue({
el: "#app2",
});
</script>
</html>
위의 코드에서 알 수 있는 것은 Vue.component()로 등록한 전역 컴포넌트는 다른 인스턴스에서도 정상 작동하였지만, 지역 컴포넌트로 선언해 놓은 컴포넌트는 다른 인스턴스에서 선언하지 않으면 사용할 수 없는 것을 확인 할 수 있다.
정리
두 번째 인스턴스의 화면에 나오지 않은 이유는 컨테이너의 유효범위 차이이다.
전역 컴포넌트는 인스턴스를 새로 생성 할 때 마다 인스턴스에 components 속성으로 등록할 필요없이 선언해서 사용하면 된다.
반면, 지역 컴포넌트는 새 인스턴스를 등록할 때 마다 등록해줘야 한다.
위 의 코드를 분석하면, < div id="app">에는 지역 컴포넌트를 등록했지만, < div id="app2">에는 지역 컴포넌트를 등록하지 않았기 때문에 화면에 나오지 않고 오류를 띄우는 것이다.
