Frontend/Vue.js 시작하기 - Age of Vue.js

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

둥둥 2022. 9. 26. 16:31
728x90
inflearn에서 수강 한 장기효(캡틴판교)님의 강의🔗정리입니다.

컴포넌트 소개

뷰 컴포넌트

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능.

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

영역을 구분했을때 그림의 오른쪽 같이 컴포넌트 사이의 관계가 생긴다.

컴포넌트 등록 및 실습

컴포넌트 등록 방법 1. 전역 컴포넌트 등록
Vue.component('컴포넌트 이름', 컴포넌트 내용);

실제 서비스 업무 상황에서 사용할때는 전역 컴포넌트를 사용할 일이 거의 없지만 구조상으로 쉽게 컴포넌트 이름과 내용을 가져갈 수 있다는 장점이 있다.

<body>
    <div id="app"> <!-- 인스턴스 -->
        <app-header></app-header> <!-- 인스턴스 안에 컴포넌트의 내용이 반영됨 -->
                <app-content></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>
        Vue.component('app-header', {
            template: '<h1>Header</h1>' // 객체안에 template 속성을 이용해 Header 생성
        });

        vue.component('app-content', {
            <div>content</div>
        })

                vue.component('app-content', {
            template: '<div>content</div>'
        });

        new Vue({ // 인스턴스 생성(Root 컴포넌트)
            el: '#app' // 아이디 선택 -> css 선택자 사용
        });
    </script>
</body>

 

인스턴스를 생성하면 개발자 도구에서 기본적으로 Root 컴포넌트로 인식하고, 그 아래의 컴포넌트가 등록된다.

등록하는 순간 Root인 ‘app’은 상위 컴포넌트(부모 컴포넌트)이고 와 가 하위 컴포넌트(자식 컴포넌트)로 위치하기된다.

🚨 Uncaught TypeError: event.respondWidth is not a function
component의 오타때문에 발생. 오타주의!
🚨 Uncaught ReferenceError: vue is not defined
처음에는 Vue.component의 tamplate안에 <div>를 넣을 수 없는건가?라는 생각을 했는데 자세히 살펴보니 Vue.component에서 대문자V가 아닌 소문자v를 사용해 발생한 오류였습니다…..
뷰는 vue가 아니라 **V**ue임을 기억하자…..
컴포넌트 등록 방법 2. 지역 컴포넌트 등록
new Vue({
            el: '#app',
            components: {
                '컴포넌트 이름': 컴포넌트 내용,
            }
        });

components라는 속성을 객체 안의 키:값형태로 정의한다.

<body>
    <div id="app">
        <app-footer></app-footer> <!-- app-footer입력후 tab 치면 자동완성 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>

        new Vue({
            el: '#app',
             // 컴포넌트 등록 방법2. 지역 컴포넌트로 등록
            components: {
                // 컴포넌트 이름': 컴포넌트 내용,
                'app-footer': {
                    template: '<footer>footer</footer>'
                }

            } // {} : 객체 리터럴(객체 표기법)
        });
    </script>
</body>

전역 컴포넌트와 지역 컴포넌트의 차이점

// 전역 컴포넌트 등록 방식
Vue.component('컴포넌트 이름', 컴포넌트 내용);

// 지역 컴포넌트 등록 방식
new Vue({
            el: '#app',
            components: {
                '컴포넌트 이름': 컴포넌트 내용,
            }
        });

지역 컴포넌트는 컴포넌트 기반 형식으로 개발해 싱글 타입 컴포넌트 체계로 갔을 때 특정 컴포넌트 하단에 어떤 것이 등록되어있는지 알 수 있다.

따라서 서비스를 등록할 때에는 지역 컴포넌트인 components를 사용해 계속 아래에 등록해 나가는 형식을 사용한다.

전역 컴포넌트는 실무에서 사용시, 대부분 플러그인이나 라이브러리 형태로 전역으로 사용해야하는 컴포넌트만 Vue.component를 사용한다.

결론적으로 일반적으로는 지역컴포넌트를 주로 사용한다.

전역 컴포넌트와는 다르게 지역 컴포넌트에 s(components)가 붙는 이유는?

원어민 입장에서 여러 개가 들어가는 속성은 s가 붙는다.

보통 서비스에 필요한 로직이 한 개가 아니라 여러 개이기 때문에 component에도 s를 붙여 components로 사용한다.

컴포넌트와 인스턴스와의 관계

위에서 정리했다싶이 인스턴스를 생성하면 컴포넌트가 된다.

따라서 인스턴스를 두개 생성하면 가 두개가 되는것을 개발자 도구에서 확인할 수 있다.

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

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
        // 전역 컴포넌트로 등록 : <app-header>
        Vue.component('app-header', {
            template: '<h1>Header</h1>' // 객체안에 template 속성을 이용해 Header 생성
        });

                // 지역 컴포넌트로 등록 : <app-footer>
        new Vue({
            el: '#app',
            components: {
                'app-footer': {
                    template: '<footer>footer</footer>'
                }
            } 
        });

        new Vue({
            el: '#app2'
        });
    </script>
</body>

새로 생성한 인스턴스 app2에 기존의 app에 있던 컴포넌트인 와 을 똑같이 붙여넣고 개발자도구에서 확인 시, 은 출력되지만 은 출력되지 않고 콘솔창에서는 오류를 확인 할 수 있다.

🚨 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
전역 컴포넌트는 인스턴스를 등록할때마다 따로 등록할 필요없이 기본적으로 모든 인스턴드에 등록이 되어있기때문에 새로운 인스턴스에서도 사용이 가능했지만, 지역 컴포넌트는 인스턴스마다 새로 생성을 해줘야 하기때문에 새로운 인스턴스에서 사용이 불가능하다.

따라서 지역 컴포넌트는 인스턴스마다 새로 생성을 해줘야 하기때문에 인스턴스를 많이 생성해야할때 번거로운 단점이 있다.

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

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>
        // 전역 컴포넌트로 등록 : <app-header>
        Vue.component('app-header', {
            template: '<h1>Header</h1>' // 객체안에 template 속성을 이용해 Header 생성
        });

                // 지역 컴포넌트로 등록 : <app-footer>
        new Vue({
            el: '#app',
            components: {
                'app-footer': {
                    template: '<footer>footer</footer>'
                }
            } 
        });

        new Vue({
            el: '#app2',
            // 지역 컴포넌트 새로 등록
            template: '<footer>footer</footer>'
        });
    </script>
</body>

새로운 인스턴스에 지역 컴포넌트를 새로 등록할경우 이상없이 출력할 수 있다.

→ 서비스를 구현할때는 인스턴스 하나를 붙이고 그 안에 컴포넌트를 붙여나가는 방법으로 진행하기때문에 위 내용은 배경지식으로 알아두면 좋다.

728x90