9. 컴포넌트 소개 및 등록 실습

freejia·2021년 10월 1일

야금야금 Vue.js

목록 보기

9/29

캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools

뷰 컴포넌트

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 기능이다.
영역을 구분하므로 재사용성을 높일 수 있다.
영역을 구분하면 컴포넌트간의 관계가 생긴다.
대부분의 모던 프론트엔드 프레임워크는 컴포넌트를 기반으로 개발한다.

컴포넌트 등록 실습

1. 루트 컴포넌트 만들기

div 태그를 하나 만들자.
Vue 인스턴스를 생성하면 기본적으로 루트 컴포넌트가 된다.
Vue 인스턴스에 el속성을 #app 로 작성하자.

이렇게 하면 app 이라는 태그 내부는 루트 컴포넌트가 인지하는 범위가 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    <!--  여기가 뷰 인스턴스의 적용 범위다 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       new Vue({
           el: '#app'
       }) 
    </script>
</body>
</html>

'Open With Live Server' 로 브라우저를 실행하고, 개발자 도구를 켜자.
(Live Server: 문서를 변경하고 저장하면 브라우저에 즉시 반영된다.)

2. 컴포넌트 정의하기

'app-header'라는 이름의 컴포넌트를 만들자.
아래의 구조로 컴포넌트를 정의할 수 있다.

Vue.component('컴포넌트 이름' , 컴포넌트 내용);

컴포넌트 내용에는 객체를 만듦과 동시에 template속성을 정의한다.

3. 컴포넌트 등록하기

app태그에 'app-header'컴포넌트를 등록해보자.

<body>
    <div id="app">
        <!-- 여기가 뷰 인스턴스의 유효 범위 -->
        <app-header></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });

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

파일을 저장하고 브라우저를 확인해보자.
Root 컴포넌트 하위에 app-header 컴포넌트가 생성됬다.

그 외 컴포넌트를 정의해보자.

'app-content' 컴포넌트를 정의하여 등록해봤다.

뷰 개발자 도구에서 컴포넌트를 살펴보자.
Root 컴포넌트 하위에 2개의 컴포넌트가 속해있다.

여기서 Root 컴포넌트는 부모 컴포넌트다.
'app-header' 컴포넌트와 'app-content' 컴포넌트는 자식 컴포넌트다.
이 구조에서 컴포넌트의 관계를 확인할 수 있다.