컴포넌트(Component)란
현재 인기있는 프론트엔드 프레임워크는 SPA(Single Page Application)라고도 불리며, 이러한 SPA는 모듈 단위로 템플릿만 교체하는 것이 특징이며, 이러한 Vue는 컴포넌트를 기반으로 구성됩니다.
이러한 컴포넌트와 이전 게시물에 언급한 필수적으로 생성해야하는 기본 오브젝트 단위인 인스턴스와 햇갈릴 수도 있다고 생각합니다.
new Vue() 생성자로 인스턴스이자 Root 컴포넌트를 생성한다고 생각하시면 구조적으로 이해가 휠씬 쉬울거 같습니다.
이러한 컴포넌트로 인해 화면내에 영역을 구분하여 개발할 수 있습니다. 또한, 코드의 재사용성이라는 특징을 가질 수 있습니다.
하지만, 이러한 컴포넌트에는 아래에 설명하겠지만 전역/지역 컴포넌트로 나눠지고 어느정도의 범위로 컴포넌트를 만들지 고민해봐야할 요소가 많습니다.
그렇기 때문에 컴포넌트의 특징을 효율적으로 이용하기 위해서는 설계가 중요합니다.
컴포넌트 설계의 중요성
너무 작게 구조적으로 자르거나 상황에 따라 비슷한 기능을 가진 컴포넌트가 계속해서 늘어난다면 코드의 가독성 또는 계속되는 개발 또는 유지보수에서 복잡성이 커질 수 있다고 생각합니다.
그렇기 때문에 너무 크지도 작지도 않은 적절한 단위의 설계가 중요하다고 생각합니다.
전역/지역 컴포넌트
위에서 언급한 것처럼 컴포넌트에는 지역 컴포넌트와 전역 컴포넌트가 존재합니다.
먼저, 컴포넌트 선언시의 옵션입니다. 2개의 컴포넌트 모두 선언시의 옵션이 동일합니다.
컴포넌트 옵션 요소
* props와 methods의 경우, 이후 컴포넌트간의 통신에서 예시와 함께 설명하겠습니다
| 옵션 | 설명 | 예제 |
| template | HTML, CSS 등을 이용하여 화면에 표시하고자 하는 내용 | template : '<html태그명>hello</html태그명>' |
| data | 함수의 형태로 컴포넌트가 바라보는 객체를 지정 | data : function() { return { msg : "hello" } } |
| props | 자식 컴포넌트에게 값을 전달하기 위해 사용 | props : ['msg' , 'num' , ....] |
| methods | 자식에서 부모로 값을 넘겨 줄 때, 이벤트 함수를 이용하여 처리 | methods: { increaseClick: function(e) { this.$emit('upNum'); } } |
각 컴포넌트 생성 코드를 보여드림과 함께 하나씩 설명하겠습니다.
● 전역 컴포넌트
전역 컴포넌트의 특징
- 모든 자식 컴포넌트에서 사용가능한 컴포넌트
- 쉽게 호출가능
- 무분별한 전역 컴포넌트 선언으로 결과물 및 코드양이 증가할 수 있음
전역 컴포넌트 선언 예시
//Vue.component('컴포넌트 이름', 컴포넌트 내용(옵션));
Vue.component('app-header',{
template: '<div>Header</div>'
});
● 지역 컴포넌트
지역 컴포넌트의 특징
- 인스턴스 생성시, 생성자 내부에서 선언
- 특정 인스턴스 내부에서만 호출가능
지역 컴포넌트 선언 예시
전역 컴포넌트와 다르게 인스턴스 생성자 내부에서 'components :'를 이용하여 선언합니다.
// 인스턴스 생성자 내부에서 선언
new Vue({
el: '#app',
// 지역 컴포넌트 선언, components복수형으로 여러개의 component선언 가능
components: {
'app-header' : {
template: '<div>Header</div>'
}
}
})
전역/지역 컴포넌트의 차이점
전역/지역 컴포넌트 각각의 선언방법을 보여드렸습니다.
이번에는 하나의 파일에 전역과 지역 컴포넌트를 모두 선언하고 화면단에 출력하면서 차이점을 보여드리겠습니다.
'app-header', 'app-content'라는 이름의 전역 컴포넌트
app, app2의 이름을 가진 인스턴스를 생성하고 app 인스턴스에는 'app-footer'라는 지역 컴포넌트를 생성했습니다.
그 후, app, app2의 인스턴스에서 'app-header', 'app-content', 'app-footer'를 호출하는 코드입니다.
코드 예시
<!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">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>app component</h1>
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
<br>
<div id="app2">
<h1>app2 component</h1>
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트
Vue.component('app-header',{
template:'<h1>(Global Component)Header</h1>'
});
Vue.component('app-content',{
template:'<div>(Global component)content</div>'
});
new Vue({
el:'#app',
// 지역 컴포넌트
components:{
'app-footer':{
template:'<div>(Local Component)footer</div'
}
}
});
new Vue({
el:'#app2'
})
</script>
</body>
</html>
코드 결과
코드 결과 및 개발자 모드에서의 Vue devtool을 확인해보면
app, app2 모두 전역으로 호출한 'app-header', 'app-content'은 확인이 되었으나 app 인스턴스에서 지역 컴포넌트로 정의한 'app-footer'는 app2 인스턴스에서는 출력되지 않는 것을 확인 할 수 있습니다.
 |
|
 |
 |
참조
[강의] 인프런 - Vue.js 시작하기 - Age of Vue.js(캡틴판교) https://www.inflearn.com/course/age-of-vuejs
'Vue' 카테고리의 다른 글
| [Vue] 뷰 라우터 (0) | 2022.05.16 |
|---|---|
| [Vue] 상하관계가 아닌 컴포넌트간 통신 (0) | 2022.04.25 |
| [Vue] 컴포넌트간 통신(event, props) (0) | 2022.04.22 |
| [Vue] 인스턴스 (0) | 2022.04.07 |
| [Vue] Vue.js 소개 (1) | 2022.04.04 |
댓글