컴포넌트를 사용한 작성방법

 

 

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며
재사용할 수 있는 컴포넌트로 구성된 대규모 응용프로그램을 구축할 수 있게 해주는 
추상적인 개념입니다. 생각해보면 거의 모든 유형의 응용프로그램 인터페이스를 컴포넌트 트리로 
추상화할 수 있습니다.

Vue에서  컴포너트는 본질적으로 미리 정의된 옵션을 가진 Vue인스턴스입니다.
Vue에서 컴포넌트를 등록하는 방법은 간단합니다.

JS부분
Vue.component('todo-item', {
    template : '<li>할일 항목 하나입니다.</li>'
})

이제 다른 컴포넌트의 템플릿에서 이 컴포넌트를 사용할 수 있습니다.
HTML 부분
<ol>
<!-- todo-item 컴포넌트의 인스턴스 만들기-->
    <todo-item></todo-item>
</ol>

그러나 이는 모든 할 일 인스턴스에 똑같은 내용을 랜더링할 것입니다.
이래서는 무언가가 부족합니다. 부모영역의 데이터를 자식 컴포넌트에 
집어 넣을 수 있어야 겠습니다. prop을 전달받을 수 있도록 할 일 
컴포넌트의 정의를 수정해봅시다.

Vue.componnet("todo-item", {
    //이제 todo-item 컴포넌트는 prop이라고 하는
    //사용자 정의 속성 같은 것을 입력받을 수 있습니다.
    //이 prop은 todo라는 이름으로 정의했습니다.
    props: ['todo'],
    template : '<li>{{todo.text})</li>'
})

이제 이 todo를 v-bind를 사용하여 각각의 반복되는 컴포넌트에 전달 할 수 있습니다.

HTML 부분
<div id="app-7">
    <ol>
    <!-- 
    이제 각 todo-item에 todo객체를 제공합니다.
    화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다.
    또한 각 구성 요소에 "키"를 제공해야 합니다.
    -->
    <todo-item
    v-for="item in groceryList"
    v-bind:todo="item"
    v-bind:key="item.id"
    >
    </todo-item>
    </ol>
</div>

JS부분
Vue.component("todo-item",{
    props :['todo'],
    template:'<li>{{todo.text}}</li>'
})

var app7 = new Vue({
    el : "#app-7", 
    data : {
        groceryList : [
            {id: 0, text : "Vegatables"},
            {id: 1, text : "Cheese"},
            {id: 2, text : "Whatever else humans are supposed to eat"}
        ]
    }
})

이것은 인위적으로 만든 예시이지만, 우리는 앱을 두 개의 더 작은 단위로 나눌 수 있었고, 
자식을 props인터페이스를 통하여 부모로부터 합리적인 수준으로 분리할 수 있었습니다.
이제 앞으로는 부모앱에 영향을 주지 않으면서 <todo-item>컴포넌트를 더 복잡한 템플릿과 
로직으로 더욱 향상시킬 수 있을 것입니다. 

대규모 응용프로그램에서는 개발 과정을 관리할 수 있는 수준하에 두기 위해 전체 앱을 
컴포넌트로 나누는 것이 필수적입니다. 

HTML 부분
<div id="app">
    <app-nav></app-nav>
    <app-view>
        <app-sidebar></app-sidebar>
        <app-content></app-content>
    </app-view>
</div>