[Vue.js] Component 기초 (1)

업무를 하기 위해서, Vue.js 를 배우기 시작했다. 

교재는
Vue.js 시작하기 - Age of Vue.js

Vue.js 시작하기 - Age of Vue.js 강의 | 장기효(캡틴판교) - 인프런

Vue.js 공식 Document 

Vue.js

그리고 Claude

Claude

 

 

오늘은 가장 기본이 되는 'Component'에 대해서 배웠다. 

컴포넌트는 독립적이고 재사용 가능한 Vue 의 한 요소이다.

이 요소를 통해 Vue는 각 컴포넌트에서 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 모델을 구현한다. 

컴포넌트를 정의하는 방법은 빌드방식과 빌드방식을 사용하지 않는 방식으로 나뉘는데 나는 NOT 빌드 방식으로 컴포넌트를 배워봤다.

아래 코드에서는 app-header 가 컴포넌트로 등록된 것이다. 

<div id="app">
	<app-header></app-header>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
	Vue.createApp({
    	components: {
        	'app-header': '<h1>헤더</h1>'
        }
    }).mount('#app');
</script>

위 처럼 DOM 에서 직접 작성하는 (In-DOM)의 경우에는 제약사항이 있다. 

1. HTML 파서 특성상 대소문자를 구분하지 않음

<app-header></app-header> <!-- ✅ -->
<appHeader></appHeader> <!-- ❌ -->

2. self-closing 이 불가

<app-header></app-header> <!-- ✅ -->
<app-header /> <!-- ❌ -->

이런 제약사항이 발생하는 이유는 DOM 에서 직접 작성하면 브라우저의 HTML Parser가 처리하는데 이 브라우저 HTML Parser는 대소문자를 구분하지 못한다. 

하지만 JavaScript 내에서 템플릿으로 작성하는 경우는 이런 제약사항이 모두 없어진다. 이때는 Vue 템플릿 컴파일러가 처리하기 때문이다.

const app = {
	template: `
    	<div>	
        	<appHeader />
        </div>
    `
}

 

이외에도 제약사항이 더 있는데 공식문서가 워낙 잘 되어있어서 참고하면 되겠다! 

(공식문서가.. 정말 잘 되어있다 ㅠㅠ 감사하다)

https://ko.vuejs.org/guide/essentials/component-basics#in-dom-template-parsing-caveats