서론
이번 글에서는 Vue에서 가장 중요하다고 할 수 있는 컴포넌트의 개념에 대해 알아보려한다. 중요도에 비해 생각보다 정리할 내용은 그리 많지 않으니 가볍게 보면 좋을 것 같다.
컴포넌트(Component)란 ?
화면을 구성할 수 있는 블록을 의미한다. 위의 (그림1)에서 보면알 수 있듯 하나의 Object를 각 레이아웃 별로 컴포넌트로 쪼개서 구성할 수 있다.
특징
- 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.
- 코드를 쉽게 이해하고 재사용할 수 있다.
- 단위테스트에 용이하다.
위의 특징들이 나올 수 있는 이유는 컴포넌트는 "블록" 개념이기 때문이다. 하나의 블록이기 때문에 구조화하기 쉽고, 재사용할 수 있는 장점이 있으며 추가로 블록 별(기능 별) 단위테스트에도 용이하다.
사용 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Sample</title>
</head>
<body>
<div id = "app">
<h2>Message : {{message}}</h2>
<my-global-component></my-global-component> <!-- 전역 컴포넌트 생성-->
<my-local-component></my-local-component> <!-- 지역 컴포넌트 생성-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('my-global-component', {
template : '<div><h2>전역 컴포넌트가 등록되었습니다.</h2></div>'
})
var localCmp = {
template : '<div><h2>지역 컴포넌트가 등록되었습니다.</h2></div>'
};
new Vue({
el : '#app',
components: {
'my-local-component' : localCmp
},
data : {
message: 'Hello Vue js!',
},
})
</script>컴포넌트는 여러 방식으로 사용할 수 있지만 이번 글에서는 기본적인 전역, 지역 컴포넌트를 선언하는 방법에 대해 정리해보았다. 추가로 위 예시에 data에 담은 메세지를 출력하는 부분도 작성이 되어있다.
위의 실행 결과는 아래와 같다.
실행 결과
이렇게 가장 기본적인 Component의 개념에 대해 알아보았고 다음에 기회가 된다면 이 Compnent를 어떻게 구조적으로 설계하여 재사용을 하며 데이터를 주고받는 부분까지 정리를 해보도록 할 예정이다.
반응형
'Programming > Vue' 카테고리의 다른 글
| [Vue] 상태 관리 Vuex란? (개념/ 사용 이유) (0) | 2022.05.19 |
|---|---|
| [Vue] lodash를 이용하여 중복 값을 제거하는 방법 (_uniqBy, _unionBy) (0) | 2022.04.27 |
| [Vue] should always be multi-word-component 에러 해결 방법 (ESLint 설정) (2) | 2022.04.25 |
| [Vue] 인스턴스 라이프 사이클(Life Cycle)이란? (개념 / 예제) (0) | 2022.04.18 |
| [Vue] MVVM 패턴이란? (개념 / 특징 / 장점) (0) | 2022.04.18 |
댓글