[ Vue.js 2 프로그래밍 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=12320270)

7. 컴포넌트

7.1 컴포넌트란?

컴포넌트는 vue.js에서 가장 강력한 기능 중 하나 입니다. 기본 html엘리먼트를 확장해 재 사용 가능한 코드를 캡슐화 하는 데 이바지합니다. 좀 더 상위 수준에서 보면 컴포넌트는 vue.js의 컴파일러가 특정 동작을 추가할 사용자 정의 엘리먼트에 해당합니다.

7.2 컴포넌트 사용하기

컴포넌트를 사용하려면 먼저 컴포넌트를 등록해야 합니다. 컴포넌트를 등록하는 한 가지 방법은 Vue.component 메서드를 사용하고 이때 태그(tag)와 생성자(constructor)를 전달하는 것 입니다.
태그는 컴포넌트의 이름으로 생성자를 옵션으로 생각하면 됩니다. template옵션은 생성자 내부에 있으며 이곳에 다른 옵션도 추가할 수 있습니다.

story 컴포넌트 등록

1
2
3

Vue.component('story', function() {
  template: '<h1>My horse is amazing!</h1>'
});

story 컴포넌트 사용

<div id="container">
  <!-- 컴포넌트는 재사용할 수 있습니다. -->
  <story></story>
  <story></story>
  <story></story>
</div>

사용자 정의 컴포넌트에 아무 이름이나 지정해도 되지만 일반적으로 고유한 이름을 사용해 나중에 추가될 수 있는 실제 html태그와 충돌하지 않도록 예방하는 것이 좋습니다.

참고
Vue.js 컴포넌트 가이드 - http://vuejs.kr/jekyll/update/2017/03/13/vuejs-component-style-guide/

7.3 템플릿

컴포넌트 템플릿을 선언하는 데는 여러 가지 방법이 있습니다. 이전에 사용한 인라인 템플릿 방식을 사용하면 템플릿 코드가 금장 지저분해집니다.

인라인템플릿이 아닌 다른 방법은 type이 text/template으로 설정되고 id가 story-template로 설정된 script 태그를 생성하는 것입니다. 이 템플릿을 사용하려면 컴포넌트의 template에서 이 스크립트에 대한 선택자를 참조해야 합니다.

템플릿의 사용

제가(책의 저자가)가장 선호하는 template 정의 방법은 template html태그를 만들고 여기에 id를 지정하는 것 입니다. 이렇게하면 이전과 마찬가지로 선택자를 참조할 수 있습니다.

template html태그를 통한 템플릿사용

7.4 프로퍼티

여러 개의 컴포넌트 인스턴스를 이용해 항상 같은 내용이 아닌 원하는 내용을 표시하도록 만들어 보겠습니다.

template(html)

1
2
3

<template id="story-template">
  <h1>{{ plot }}</h1>
</template>

component등록

vue.component('story', {
  props: ['plot'],
  template: '#story-template'
});

사용

<div id="container">
  <story plot="my horse is amazing."></story>
  <story plot="narwhals invented shish kebab."></story>
  <story plot="the dark side of the force is stronger."></story>
</div>

컴포넌트는 프로퍼티를 두 개 이상 가질 수 있습니다. 예를 들어 모든 이야기에 대해 줄거리와 작가를 표시하려면 writer도 함께 전달해야 합니다.

1	<story plot="my horse is amazing" writer="mr. weeble"></story>

위와 같이 프로퍼티가 많아져서 엘리먼트가 지저분해지면 객체를 전달하고 해당 객체의 프로퍼티를 표시할 수 있습니다.

1	<story v-bind:story="{plot: 'my horse is amazing!', writer: 'mr. weeble'}"></story>

정보

v-bind는 하나 이상의 속성 또는 컴포넌트 프로퍼티를 표현식에 동적으로 바인딩하는 데 사용

story 프로퍼티는 문자열(String)이 아닌 자바스크립트 객체(Object)이므로 story=”…”가 아닌 v-bind:story=”…”을 사용해 story 프로퍼티를 전달된 객체와 바인딩 합니다.

v-bind의 축약형은 :이므로 이제 :story=”…”와 같이 사용합니다.

7.5 재사용성

사용 예

7.6 종합 예제

위의 예제에서 favorite버튼을 클릭하면 favorite데이터 값(new Vue에서의)을 갱신하여 모든 favorite버튼을 숨겨지는 것을 의도하였으나
기본적으로 모든 프로퍼티는 자식 프로퍼티와 부모 프로퍼티 사이에서 단방향 바인딩을 형성합니다. 부모 프로퍼티가 갱신되면 자식에게 전달되지만 반대 방향으로는 전달되지 않기때문에 의도대로 동작하지 않습니다.
(지금까지의 내용으로는 자식과 부모의 데이터를 동기화할 수 없습니다)

(vue.js) - 07 컴포넌트