1장에서 Vue의 장점을 설명하면서 컴포넌트를 이야기 했습니다. 그 컴포넌트에 대해서 이야기 하려고 합니다.
Component(컴포넌트)?
Component는 하나의 부품이라고 보시면 이해기 쉬울 것입니다. 예로 기계를 만들때 여러 부품을 조합하여 만드는 것을 생각 해 볼 수 있습니다. 이러한 부품들은 나중에 다시 재활용도 가능하고 여러 장점이 가득합니다. Vue 컴포넌트 또한 똑같습니다. 또한 이러한 컴포넌트는 어느 형식을 가지고 있기 때문에 다른 사람이 해당 코드를 보더라도 쉽게 직관적으로 이해 할 수 있다는 것도 장점으로 작용합니다.
이러한 Component에는 두 종류가 존재합니다. Local(지역) Component 와 global (전역) component 가 존재합니다.
그렇다면 두개의 차이점은 무엇일까요? 바로 범위(scope)입니다. 지역은 말그대로 특정범위, 좁은 범위에서만 사용가능하고 전역은 어느 곳에서든 사용할 수 있다는 것입니다.
Local(지역) Component
지역 컴포넌트의 선언 방법
var 변수명 = {
template : '들어갈 내용'
}
지역 컴포넌트를 인스턴스에 등록 (사용자 정의 태그 등록)
new Vue({
el : "#pooney",
components : {
'local-component' : local
}
})
지역컴포넌트 사용
<div id='pooneny'>
<local-component><local-comonent>
</div>
test.html
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
</head>
<body>
<div id="pooney">
<!-- 3번 -->
<local-component></local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1번
var local = {
template : '<div>pooney의 지역컴포넌트</div>'
}
//2번
new Vue({
el : "#pooney",
components : {
'local-component' : local
}
})
</script>
</body>
</html>위의 흐름은 아래와 같습니다.
1) 1번의 local에 지역변수를 선언
2) 2번의 생성자를 통한 인스턴스를 생성하면서 components에 해당 지역 컴포넌트인 local-component(태그)를 사용하겠다고 등록합니다.
3)해당 컴포넌트 태그를 입력하여 사용합니다.
4. 랜더링하면서 해당 <local-component>는 local 컴포넌트에서 정의한 <div>pooney의 지역컴포넌트</div>로 바뀌게 될것입니다.
그결과 아래와 같이 "pooney의 지역컴포넌트" 가 출력 되는 것을 확인 할 수 있습니다.
만약 다른 인스턴스에 해당 컴포넌트를 사용하려고 한다면 어떻게 될까요?
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
</head>
<body>
<div id="pooney">
<div>pooney 영역입니다.</div>
<local-component></local-component>
</div>
<div id="other">
<div>other 영역입니다.</div>
<local-component></local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var local = {
template : '<div>pooney의 지역컴포넌트</div>'
}
new Vue({
el : "#pooney",
components : {
'local-component' : local
}
})
new Vue({
el : "#other",
})
</script>
</body>
</html>
아래와 같이 출력 other 영역에는 출력이 되지 않고 해당 컴포넌트는 없다고 에러로그를 출력 하는 것을 확인 할 수 있습니다.
그렇다면 전역 컴포넌트는 어떻게 될까요?
global (전역) component
그러면 이젠 전역 컴포넌트에 대해서 알아 보도록 하겠습니다. 전역은 지역과 선언 방법이 조금 다릅니다.
전역 컴포넌트 선언
Vue.component('컴포넌트명',{
template : '<div>pooney의 전역 컴포넌트입니다.</div>'
})
test.html
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
</head>
<body>
<div id="pooney">
<div>pooney 영역입니다.</div>
<global-component></global-component>
</div>
<div id="other">
<div>other 영역입니다.</div>
<global-component></global-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('global-component',{
template : '<div>pooney의 전역 컴포넌트입니다.</div>'
})
new Vue({
el : '#pooney'
})
new Vue({
el : '#other'
})
</script>
</body>
</html>
지역 컴포넌트와 달리 인스턴스에 등록을 안하더라도 사용할 수 있는 것을 확인 할 수 있습니다. 이렇듯 두개의 차이점은 지역은 해당 컴포넌트를 사용하기 위해서 인스턴스에 등록을 해줘야 하지만 전역은 별다른 등록을 하지 않고 어느 인스턴스에서도 사용 할 수 있는것을 확인 할 수 있습니다.
오늘은 지역, 전역 컴포넌트에 알아 봤습니다. 해당 부분은 작업하면서 중요한 부분으로 꼭 이해하고 넘어 가셔야합니다.
'Vue' 카테고리의 다른 글
| [Vue] 부모 자식 간에 created, mounted 순서 (1) | 2021.10.25 |
|---|---|
| [Vue] Vue 인스턴스 와 LIFECYCLE란? -2 (0) | 2021.03.01 |
| [Vue] Intellj에서 Vue.js 프로젝트 생성하기 -1 (0) | 2021.03.01 |
