[Vue.js] #3 컴포넌트

in Vue.js on Web, Vue.js
[Vue.js] #3 컴포넌트

Vue.js 시작하기 - Age of Vue.js 강의 섹션 3. 컴포넌트

컴포넌트란

1

현대의 프레임워크들은 대부분 컴포넌트 기반으로 개발하고 있다.
컴포넌트란, 화면을 영역별로 나누어서 따로 관리할 수 있도록 한 것이다.

이렇게 함으로써 코드의 재사용성을 높일 수 있다.

컴포넌트 등록

예시 코드를 통해 학습해보자.

// /playground/component.html

<body>
    <div id="app">
        <!-- 3. 컴포넌트 태그 사용 -->
        <app-header></app-header>
        <app-content></app-content>
        <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>
        // 2-1. 전역 컴포넌트 등록
        // Vue.component('컴포넌트 이름', {
        //  컴포넌트 내용
        // })
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });

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

        // 1. Vue 생성자 만들기
        new Vue({ 
            el: '#app',
            // 2-2. 지역 컴포넌트 등록
            components: {
              // '컴포넌트 이름': {컴포넌트 내용}
                'app-footer': {
                    template: '<footer>footer</footer>'
                }
            }
        });

        new Vue({
            el: '#app2'
            // components: {
            //     'app-footer': {
            //         template: '<footer>footer</footer>'
            //     }
            // }
        });
    </script>
</body>

2

1Vue 생성자를 통해 두 개의 div 태그(app1, app2)에 인스턴스를 붙였다.
2-1전역 컴포넌트를 등록하였다.
2-2지역 컴포넌트를 등록하였다.
3만들어진 컴포넌트 태그를 사용하였다.

그 결과, App1, App2 라는 각 태그를 나타내는 영역이 생겼으며,
Root 컴포넌트 아래에 하위 컴포넌트가 생겼다.

여기서 주목할점은 app-footer 이다.

App1, App2 모두 동일하게 app-footer 컴포넌트를 사용했지만

App1의 경우 자신의 생성자에 선언한 app-footer 컴포넌트를 사용하였고,
App2의 경우 사용할 수 없기 때문에 출력되지 않았다.

아주 익숙한 전역 변수, 지역 변수와 같은 개념같다.
보통 전역 컴포넌트는 잘 안쓰고, 지역 컴포넌트를 사용하여 관리할 것이라고 한다.

© 2022. All rights reserved.