-
3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 2개발 공부/Do it! Vue.js 입문 2025. 5. 21. 09:00반응형
3장 - 2
03-2 뷰 컴포넌트
<컴포넌트란?>
- 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다.
- 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.
- 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드 재사용이 편리하다.
- 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다.
- 뷰에서는 웹 화면을 구성할 때 흔히 사용하는 내비게이션 바(navigation bar), 테이블(table), 리스트(list), 인풋 박스(input box) 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.
컴포넌트로 구분한 화면 영역 간의 관계도 - 위의 왼쪽 그림은 화면 전체를 Header, Content, Footer로 분할하였고, Content 영역을 Aside, List 영역으로 분할했다. 즉, 화면 전체를 3개의 컴포넌트로 분할한 후 분할된 1개의 컴포넌트에서 다시 2개의 하위 컴포넌트로 분할한 것이다.
- 오른쪽 그림은 각 컴포넌트 간의 관계를 나타낸다. 이러한 관계는 뷰에서 화면을 구성하는 데 매우 중요한 역할을 하며, 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계해야 한다.
- 참고로 컴포넌트 간의 관계는 자료구조의 트리(Tree)모양과 유사하다.
반응형<컴포넌트 등록하기>
- 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있다.
- 지역(local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖는다. 즉, 특정 범위 내에서만 사용할 수 있다.
- 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 즉, 뷰로 접근 가능한 모든 범위에서 사용할 수 있다.
전역 컴포넌트 등록
- 전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다.
- 전역 컴포넌트 등록 형식은 아래와 같다.
Vue.component('컴포넌트 이름', { // 컴포넌트 내용 });- 전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 내용이 있다.
- 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그(custom tag)이름을 의미한다. 태그 이름의 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 '모두 소문자'와 '케밥 기법'을 따르지 않아도 된다.
- 사용자 정의 태그 : HTML 표준 태그들 이외에도 웹 개발자가 직접 정의하여 사용할 수 있는 태그
- 케밥 기법 : 변수가 단어의 조합으로 이루어져 있을 때, 단어와 단어 사이를 -로 잇는 변수 명명 방식(예: my-component나 my-global-component 등)
- 컴포넌트 내용에는 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성한다. template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.
- 다음 전역 컴포넌트를 등록하고 화면에 그리는 예제를 살펴보자.
<html> <head> <title>Vue Component Registration</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( )
- 인스턴스 객체 생성 (옵션 속성 포함)
- 특정 화면 요소에 인스턴스 부착
- 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환) - <my-component>가 <div>로 변환됨
- 변환된 화면 요소를 사용자가 최종 확인
- 결론적으로 인스턴스가 생성된 후 화면에 그려질 때 실제 HTML 코드 모양은 다음과 같다.
<div id="app"> <button>컴포넌트 등록</button> <!-- 등록한 my-component가 최종적으로 변환된 모습 --> <div>전역 컴포넌트가 등록되었습니다!</div> </div>지역 컴포넌트 등록
- 지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.
new Vue({ components: { '컴포넌트 이름': 컴포넌트 내용 } });- 컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의미한다.
- 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변환될 때의 내용을 의미한다.
- 지역 컴포넌트를 등록하는 방법을 아래의 예제를 통해 알아보자.
<html> <head> <title>Vue Component Registration</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> var cmp = { // 컴포넌트 내용 template: '<div>지역 컴포넌트가 등록되었습니다!</div>' }; new Vue({ el: '#app', components: { 'my-local-component': cmp } }); </script> </body> </html>
지역 컴포넌트를 표시할 화면 HTML 코드 - 위 코드에서 변수 cmp에는 화면에 나타낼 컴포넌트의 내용을 정의했다. 컴포넌트의 내용에 template, data, methods 등 여러 가지 속성이 들어갈 수 있지만 여기서는 간단히 컴포넌트를 등록하는 코드만 보여주기 위해 template 속성만 사용하였다.
<지역 컴포넌트와 전역 컴포넌트의 차이>
- 지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서는 인스턴스의 유효 범위를 이해해야 한다.
- 인스턴스 유효 범위란 HTML의 특정 범위 안에서만 인스턴스의 내용이 유효한 것이다.
- 지역 컴포넌트와 전역 컴포넌트를 등록하는 아래의 예제를 살펴보자.
<html> <head> <title>Vue Component Registration</title> </head> <body> <div id="app"> <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 } }); </script> </body> </html>
위 예제 코드 실행 결과 화면 - 위 코드는 인스턴스를 하나 생성하여 my-global-component 전역 컴포넌트와 my-local-component 지역 컴포넌트를 등록하고 화면에 나타내는 예제이며, 위와 같은 결과 화면이 나타난다.
- 그럼 이번에는 인스턴스를 하나 더 생성한 예제를 살펴보자.
<html> <head> <title>Vue Component Registration</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>
앞 예제 코드 실행 결과 화면 - HTML에 <div id="app2"> 태그를 하나 더 추가하고, 인스턴스도 하나 더 추가하였다. 그리고 <div id="app2"> 태그에 전역, 지역 컴포넌트 모두 등록하였다.
- 결과 화면을 보면 첫 번째 인스턴스 영역에는 전역, 지역 컴포넌트가 모두 정상적으로 나타났다. 하지만 두 번째 인스턴스 영역에는 전역 컴포넌트만 나타나고, 지역 컴포넌트는 나타나지 않는다.
- 이러한 이유는 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문이다.
- 전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성을 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다. 반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해 줘야 한다.
- 위 예제를 개발자 도구에서의 Elements, Console을 확인해보면 아래와 같다.
코드 결과를 크롬 개발자 도구의 'Elements'와 'Console' 패널에서 확인 - Elements 패널에서의 <div id="app2">에서 <my-local-component> 태그는 두 번째 인스턴스의 유효 범위 안에 있더라도 이 컴포넌트가 등록된 첫 번째 유효 범위를 벗어나기 때문에 브라우저에서는 HTML 사용자 정의 태그로 인식하고, Console 패널에서의 뷰에서는 해당 컴포넌트를 제대로 등록했는지 물어보는 오류를 표시한다.
해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.
반응형'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글
4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신 - 1 (1) 2025.05.23 3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 3 (2) 2025.05.22 3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 1 (0) 2025.05.20 2장. 개발 환경 설정 및 첫 번째 프로젝트 (1) 2025.05.19 1장. Vue.js 소개 (2) 2025.05.18
