🍥 컴포넌트란?
- 컴포넌트(component): 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)
- 컴포넌트의 장점
- 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.
- 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기 편리하다.
- 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다.
뷰에서는 웹화면을 구성할 때 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.
ex) 내비게이션 바, 테이블, 리스트, 인풋 박스, Header, Content(Aside, List), Footer
또한 컴포넌트 간의 관게는 뷰에서 화면을 구성하는데 매우 중요한 역할을 하며, 웹 페이지 화면을 설계할 때도 이러한 골격을 유지하면서 설계해야한다. (이러한 관계는 자료구조의 트리* 모양과 유사하다!🌲)
💡 트리
: 컴퓨터 자료구조 중 하나로, 노드끼리의 연결이 부모-자식의 구조를 따른다. 전체적인 모양이 나무와 비슷하다!
윈도우 파일 시스템 체계를 비롯한 각종 데이터베이스에 활용되고 있다.
🍥 컴포넌트 등록하기
컴포넌트를 등록하는 방법은 지역(local)과 전역(global) 두 가지가 있다.
- 지역 컴포넌트: 특정 인스턴스에서만 유효한 범위를 갖는다.
- 전역 컴포넌트: 여러 인스턴스에서 공통으로 사용할 수 있다.
📎 전역 컴포넌트 등록
전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다.
전역 컴포넌트는 모든 인스턴스에 등록하려면 아래의 코드와 같이 Vue 생성자에서 .component()를 호출하여 수행하면된다.
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});
전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 내용이 있다.
- 컴포넌트 이름
- template 속성에서 사용할 HTML 사용자 정의 태그(custom tag) 이름을 의미한다.
- 여기서 태그 이름의 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 '모두 소문자'와 '케밥 기법*'을 따르지 않아도 된다.
- 케밥 기법*: 변수가 단어의 조합으로 이루어져 있을 때, 단어와 단어 사이를 -로 잇는 변수 명명 방식 🌯🥫
ex) my-component, hyeonjin-babo
- 컴포넌트 내용
- 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들
- template, data, methods 등 인스턴스 옵션 속성을 정의
그럼 이제 전역 컴포넌트를 1개 등록하고 화면에 그리는 예제를 해보자!
<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>
위의 코드를 실행하면 아래와 같은 결과를 확인할 수 있다.
녜?
그렇다.. 한글이 깨지는 오류가 발생한다.
이 코드를 실행할 때 한글이 깨지는 이유는 HTML 파일에 적절한 문자 인코딩이 지정되지 않았기 때문이다. 웹 브라우저는 기본적으로 파일의 문자 인코딩을 자동으로 감지하려고 하지만, 때로는 잘못 감지할 수 있다.
즉, 이를 방지하려면 HTML 파일의 <head> 섹션에 문자 인코딩을 명시적으로 지정해 주는 것이 좋다고 한다...
그래서 <head> 태그 안쪽에 <meta>태그의 속성인 charset으로 문서의 문자 인코딩을 지정해주면! -> <meta charset="UTF-8">
짠~! 야무진 결과를 확인할 수 있다!😎👍
그럼 이 코드가 실행되어 화면에 나타나기까지의 과정을 살펴보자!
뷰 라이브러리 파일 로딩
⬇︎
뷰 생성자로 컴포넌트 등록
( Vue.component() )
⬇︎
인스턴스 객체 생성
( 옵션 속성 포함 )
⬇︎
특정 화면 요소에 인스턴스 부착
⬇︎
인스턴스 내용 변환
( 등록된 컴포넌트 내용도 변환 )
+) <my-component>가 <div>로 변환됨
⬇︎
변환된 화면 요소를 사용자가 최종 확인
위의 과정에서 확인할 수 있듯 인스턴스가 생성되고, 인스턴스의 내용이 화면 요소로 변환 될 때 컴포넌트 태그도 함께 변환된다.
따라서 컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 볼 수 있는 형태의 화면 요소로 최종 변환된다.
앞에서 언급했듯 전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호 {}안에는 컴포넌트 내용인 'HTML 태그가 실제로 화면에서 그려질 때 표시될 내용'을 작성해야한다.
여기선 컴포넌트 이름을 my-component로 지정한 것이고 컴포넌트 내용으로는 template 속성을 정의하고 <div>태그를 작성하였다.
📎 지역 컴포넌트 등록
지역 컴포넌트 등록은 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.
컴포넌트 이름과 컴포넌트 내용의 의미는 전역 컴포넌트와 같다! 오예
new Vue({
components: {
'컴포넌트 이름' : 컴포넌트 내용
}
});
그럼 지역 컴포넌트도 한 번 만들어보자! (이번엔 오류가 나지 않게 웹스톰에서 제공하는 .html 파일로 코드를 짰다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
결과는?
성공적이다!
변수 cmp에 화면에 나타낼 컴포넌트의 내용을 정의하고 뷰 인스턴스에 components 속성을 추가한 후, 컴포넌트 이름에는 my-local-component를, 컴포넌트 내용에는 앞에서 컴포넌트 내용을 정의한 변수 cmp를 지정하였다.
📎 지역 컴포넌트와 전역 컴포넌트의 차이
둘의 차이를 알기 위해서는 지난 글에서 배웠던 인스턴스 유효 범위를 알고 있어야한다. 아직 모른다면 아래의 글을 참고해주길!
짧게 설명하자면 인스턴스의 유효범위란 HTML의 특정 범위 안에서만 인스턴스의 내용이 유효하다는 것이다.
[Do it! Vue.js 입문] 화면을 개발하기 위한 필수 단위 - 뷰 인스턴스
03-1 뷰 인스턴스뷰 인스턴스의 정의와 속성뷰 인스턴스(instance): 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 - 뷰 인스턴스 생성아래의 코드는 화면에 'Hello Vue.js'를 출력하
jjini6530.tistory.com
실습을 통해 차이점을 알아보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Local and Global Components</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>
위의 코드를 실행하면 아래와 같은 결과를 얻을 수 있다.
왜 <div id="app">과 <div id="app2">태그에 전역, 지역 컴포넌트를 모두 등록하였는데 두 번째 인스턴스 영역에는 전역 컴포넌트만 나타났을까?
왜냐, 바로 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문이다.
지역 컴포넌트는 인스턴스를 새로 생성할 때 마다 인스턴스에 components 속성으로 등록해야한다. 하지만 전역 컴포넌트는 그럴 필요없이 어느 인스턴스에서든지 사용할 수 있다.
'Frontend > Vue.js' 카테고리의 다른 글
| [Do it! Vue.js 입문] 화면을 개발하기 위한 필수 단위 - 뷰 인스턴스 (1) | 2024.07.17 |
|---|---|
| [Do it! Vue.js 입문] Vue.js 소개 (0) | 2024.07.17 |
