[Vue.js] 컴포넌트에 관하여

Vue.js의 강력한 기능 중의 하나는 컴포넌트인데, 이를 알아보자.

 

0. 컴포넌트 정의 : 기능을 가지고 있는 HTML 요소의 설계도로, 공통적인 기능을 캡슐화하여 여러군데에서 쓰일 수 있게 만들어 놓은 것이다.

 

1. 컴포넌트를 쓰는 이유 : 2가지의 다른 기능이 있다고 했을때, 공통적으로 쓰이는 필수 기능들이 겹치는 경우가 있다.

필수 기능들이 변경된다면 수정하는 시간이 기능 개수가 많아질수록 늘어나게 되는데, 이를 컴포넌트로 공통적인 기능을 묶어준다면, 소스를 여러번 수정하지 않기 때문에 수정시간이 줄어들 뿐만 아니라 정확도도 많이 개선될 것이다.

 

2. 컴포넌트 등록 사용방법

컴포넌트 등록(정의)하기 (Js)	Vue.component('my-component', {   template: '<p>MyComponent</p>' });
컴포넌트 사용하기 (html)	<div id="app">   <my-component></my-component> </div>
실제 렌더링된 모습 (html)	<div id="app">   <p>MyComponent</p> </div>

 

3. 예제 - 끝말잇기 컴포넌트 여러개

 ※ view의 html에서는 케밥케이스만 사용가능하며, script에서는 케밥케이스 또는 카멜케이스 사용가능

<div id="root">         <word-relay></word-relay>         <word-relay></word-relay>       </div>       <script>         Vue.component('word-relay', { // 전역 컴포넌트           template: `...`,           data() {             return {                ...             };           },           methods: {             onSubmitForm(e) {                ...             }           }         })       </script>

전체 소스 : https://github.com/developerKmhan/vueTraining/commit/e394c36fe545421626c4a5b737c35219ef9871fe 예제에서 참고한 강의 : https://www.youtube.com/watch?v=kgZ-HsLA6rk&list=PLcqDmjxt30RsdnPeU0ogHFMoggSQ_d7ao&index=8