[Vue.Js] 5. Vue.Js Component를 알아 보자!
Component(컴포넌트)란 조합하여 화면을 구성하는 블록(특정 영역)을 의미합니다
화면을 구조화하여 하나의 패턴으로 개발을 할 수 있어 재사용 및 유지 보수가 수월합니다.
또한 이미 방식이 정해져 있어 다른 사람이 작성한 코드라 할지라도 이해가 쉽습니다.
화면 전체를 크게 Header, Body, Footer로 3 분할한 사진입니다.
트리 구조로 보면 다음과 같이 표현할 수 있습니다.
3개의 큰 영역으로 분할 했습니다.
실제로 화면을 구성하는 경우 이러한 형태를 유지하면서 구현해야 합니다.
이제 활용하기 위해 등록하는 방법을 알아보겠습니다.
컴포넌트 역시 전역과 지역이 있으며 전역은 어디서나 사용 가능하고 지역은 특정 인스턴스에서만 사용 가능합니다.
전역 컴포넌트
아래의 코드를 입력하시고 돌려보시면
<!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>Global Component</title>
</head>
<body>
<div id="app">
<test-component></test-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<script>
// Vue global component
Vue.component("test-component", {
template: '<div>test component</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>아래의 사진과 같이 출력 됨을 확인하실 수 있습니다.
Vue.component(컴포넌트 이름, 내용)를 통해 전역 컴포넌트를 만들었고 template속성을 통해 HTML, CSS와 같은 요소를 화면에 그릴 수 있게 만들었습니다.
test-component를 만들어 위의 app안에서 사용했음을 확인하실 수 있습니다
컴포넌트가 디스플레이되는 플로우를 한번 보시곘습니다.
아래의 사진과 같은 흐름을 전개됩니다.
인스턴스에서 화면 요소로 변경되는 시점에 컴포넌트도 함께 변경되는 것을 확인하실 수 있습니다
지역 컴포넌트
지역 컴포넌트는 아래와 같이 등록하실 수 있습니다.
<!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>Local Component</title>
</head>
<body>
<div id="app">
<test-component></test-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<script>
var test_template = {
template: '<div>test component</div>'
};
new Vue({
el: '#app',
components: {
'test-component' : test_template
},
});
</script>
</body>
</html>test_template라는 변수를 만들고 Vue인스턴스 내부에서 components속성 내에 test-component라는 컴포넌트를 정의하고 이전에 만든 test_template를 넣어줍니다.
그러면 아래와 같이 변환된 결과를 확인하실 수 있습니다.
컴포넌트에는 template이외에도 많은 속성이 들어갈 수 있으나 이번 예제에서는 사용하지 않았습니다.