뷰 컴포넌트란?
- 화면을 구성할 수 있는 블록과 같은 개념
- 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발이 가능
- 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드의 재사용이나 수정이 편리하다.
- 코드가 직관적이다.
원래의 컴포넌트는 왼쪽과 같이 되어있지만 뷰는 오른쪽 처럼 트리 구조로 각각 컴포넌트 간의 관계가 맺어져 있다. 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계해야 한다.
전역 컴포넌트
- 여러 인스턴스에서 공통으로 사용이 가능하다.
- 뷰로 접근 가능한 모든 범위에서 사용이 가능하다.
-- 전역 컴포넌트 등록
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미
컴포넌트 내용 : template, data, methods 등 인스턴스 옵션 속성 정의
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component> //전역 컴포넌트 표시
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('my-component', {
template: '<div>전역 컴포넌트가 등록되었습니다.</div>';
});
new Vue({
el : '#app'
});
</script>
</body>
</html>Vue.component로 전역 컴포넌트를 생성하여 해당 컴포넌트 아이디랑 매칭되는 곳에 template 소스가 변경된다.
화면에 나타나기 까지 처리 과정
- 뷰 라이브러리 파일 로딩
- 뷰 생성자로 컴포넌트 등록 (Vue.component())
- 인스턴스 객체 생성 (옵션 속성 포함)
- 특정 화면 요소에 인스턴스 부착
- 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환) -> 가 로 변환됨
- 변환된 화면 요소를 사용자가 최종 확인
지역컴포넌트
- 특정 인스턴스에서만 유효한 범위를 갖음
- 특정 범위 내에서만 사용 가능
-- 지역 컴포넌트 등록 new Vue({ components: { '컴포넌트 이름' : 컴포넌트 내용 } });
```<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component> //지역 컴포넌트 표시
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
const cmp = {
//컴포넌트 내용
template : '<div>지역 컴포넌트가 등록되었습니다.</div>'
};
new Vue({
el : '#app',
components : {
'my-local-component' : cmp
}
});
</script>
</body>
</html>new Vue() 로 인스턴스 생성하여 components 로 지역 컴포넌트를 생성
(3) 느낀점
뷰의 컴포넌트를 공부하며 뷰는 개발자의 편의와 당장 개발을 포함한 시간이 지나고 유지보수가 매우 용이하게 만들어주는 프레임워크라는걸 느낀거 같다.
아직 JS에 대한 공부를 제대로 하지 않아 전역 컴포넌트와 지역 컴포넌트를 작성하는 코드를 완벽하게 이해는 하지 못했지만, 이 컴포넌트들을 잘 배워두고 익혀둔다면 나중에 방대한 양의 코드들 사이에서 내가 원하는 컴포넌트만을 골라 유지보수 및 수정이 좋겠다는 점을 생각하며 느꼈다.
안녕하세요 쌩 초보 장휘주 입니다. 열심히 하는 개발자가 될게요.