신입 시절 Anguler.js를 이용해서 앱을 만들었던 기억이 있는데 당시에는 그냥 자바스크립트라고 생각하고 업무처리를 위해 계속 살펴보다 보니 그게 익숙해져서 그러려니 하고 사용했다.
이번에 Vue.js를 스터디하면서 인스턴스&컴포넌트 파트를 공부하고 실습하는 과정에서 책에 나온 코드를 올려보고 이를 활용할 수 있는 방법을 기록하고자 한다.
아래 코드는 전역 컴포넌트와 지역 컴포넌트를 테스트하는 코드이다. 실습예제 코드를 그대로 타이핑하면서 브라우저에서 돔을 그리는 과정에서 각각 선언된 컴포넌트를 어떻게 처리하는지 확인하는 코드이다.
프로그래밍에서 지역변수와 전역변수의 활용방법을 안다면 이해에 크게 무리는 없는 내용이다.
여기서 주목해야 할 부분이 있는데 전역 컴포넌트는 한번 등록하면 어떤 인스턴스에서든 자유롭게 호출이 가능하다는 부분
즉 사이트 내에서 형태에 변화가 없이 지속적으로 사용되는 메모 양식이나 문의 양식 아니면 정보 입력화면 등을 전역에 등록해서 해당 컴포넌트를 호출할 수 있는 방법으로 활용이 가능할 듯하다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js component</title>
</head>
<body>
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<hr>
<div id="app2">
<h3>두 번째 인스턴스 영역</h3>
<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>전역 컴포넌트입니다.</div>'
});
//변수로 선언된 컴포넌트
var cmp = {
template : '<div>지역 컴포넌트입니다..</div>'
};
//페이지에서 호출되는 요소들의 시작 포인트
new Vue({
el : '#app' ,
components : {
'my-local-component' : cmp
}
});
new Vue({
el : '#app2'
});
</script>
</body>
</html>
내용상 예상되는 흔한 실수는
프로젝트 진행 시 산발적으로 선언한 전역 컴포넌트가 정리가 되지 않아 불필요한 코드가 발생
DOM에서 컴포넌트를 위치시키는 사용자 정의 태그 혼동으로 예상하지 못한 컴포넌트 등장
지속적으로 실습 및 개발에 적용을 통해 확인하고 내용을 추가하기로 한다.
<이지퍼블리싱 - Vue.js 입문 장기효 저자님> 서적을 바탕으로 스터디하면서 학습하는 내용을 작성하고 있습니다.