[Vue.js 시작하기] 03. 컴포넌트

Vue.js 시작하기 강의 🔗 👆🏻

캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다.

---

3. 컴포넌트

현재 대부분의 프레임워크는 컴포넌트 기반으로 개발을 하고 있다.

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.

기본적으로 컴포넌트를 등록할 경우 root 컴포넌트로 할당된다.

        // Vue.component('컴포넌트 이름', 컴포넌트 내용); 전역등록 
        // 플러그나 라이브러리 등 전역으로 사용해야 하는 것 등록. 어떤 인스턴스든 사용가능하다.
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });
        // instance는 root 컴포넌트가 된다. 아래와 같은 방식이 보기 쉽다.
        new Vue({
            el: '#app', // el : div 는 div 태그 전부  자동으로 전역태그로 등록
            components:{
                // 지역 컴포넌트 등록 방식
                // '컴포넌트 이름' : 컴포넌트 내용
                // 보기 편리하다 상위 하위 구조 보기 유용
                // 지역 컴포넌트는 해당 인스턴스만 사용가능하다.
                'app-footer' : {
                    template : '<footer>footer</footer>'
                }
            }
        });

        new Vue({
            el: '#app2'
        })
    

• 전역 컴포넌트 : Vue.component() 함수로 등록
  • 플로그인, 라이브러리 등에 사용
• 지역 컴포넌트 : Vue 인스턴스를 생성하면서 components 속성에 넣어서 생성.
  • components 속 template로 치환된다.
• id=app2 인 div에서는 컴포넌트 등록을 안했기 때문에 <app-footer></app-footer>를 사용할 수 없다.
• 전역 컴포넌트는 어떤 root에 상관없이 사용할 수 있지만, 지역 컴포넌트의 경우 해당 root 내에서만 사용할 수 있다.