[Vue.js] 2. 컴포넌트(props,template)에 대한 이해와 예제

해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면

Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

 

 

컴포넌트

컴포넌트는 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 어플리케이션을 구축할 수 있게 해주는 추상적인 개념입니다.  

 

*쉽게 말하면 실용적으로 보면 HTML 태그처럼 사용할 수 있는 태그 정도로 보시면 좋을 것 같습니다.

 

 

컴포넌트 작성법

<div id="app">
   <ddacker></ddacker>
</div>

Vue.component('ddacker',{
	template:'<p>안녕 나는 뚝딱이야</p>'
})
new Vue({
  el: '#app',
  data: {
  },
})

https://jsfiddle.net/qudcks0703/y1zef7or/37/

 

위에 전체적인 코드를 설명하자면 순서대로 설명하겠습니다.

1) HTML 태그중 id라는 속성이 app인 태그에 Vue객체를 생성할것이다.

2) 생성된 Vue 객체에 ddacker이라는 컴포넌트를 생성할것입니다 (태그를 생성할 것이다)

3) 태그 안에 <p>안녕 나는 뚝딱이야</p> 라는 HTML을 표기 할 것이다.

즉) #app태그 내에 ddacker라는 태그를 사용해서 template을 보여줄 것이다.

 

※ 그밖에..

1. #app 태그 내에서는 ddacker 컴포넌트 사용 불가.

2. template는 Vue에서 컴포넌트에 주는 기본적인 속성 

3. template 내에 {{}} 또는 디렉티브 (v-on,v-for 등등) 작성 가능

 

 

컴포넌트의 제일 중요한?! 속성 Props

<div id="app">
   <ddacker
     :id="bc.id"
     :pw="bc.pw"
     :name="bc.name"
     :phone="bc.phone"
   > </ddacker>
</div>

Vue.component('ddacker',{
	props:{
  	id:'',
    pw:'',
    name:'',
    phone:'',
  },
  template:"<div>제 아이디는 {{id}} <br/>  제 비밀번호는 {{pw}} <br/> 
  제 이름은 {{name}} <br/> 제 핸드폰 번호는 {{phone}} 입니다.</div>"
     
})
new Vue({
  el: '#app',
  data: {
  	bc:{
    	id:'bcChoi',
      pw:'1234',
      name:'최병찬',
      phone:'010-9548-5110'
    },
    Hs:{
    	id:'hsChoi',
      pw:'1234',
      name:'최현종',
      phone:'010-8888-1234'
    }
  },
})

https://jsfiddle.net/qudcks0703/y1zef7or/45/

 

props는 정말 잘 이해하고 넘어가시면 컴포넌트를 사용하실때 가장 편리하면서 유용한 속성이 될 것입니다.먼저 props를 설명하기 전에, 우리가 만든 Vue 객체를 부모라고 한다면 부모 객체에 의해 만들어진 컴포트는 자식 컴포넌트라고 합니다. 이처럼 컴포넌트는 트리 형식 구조로 되어 있다고 생각하시면 되겠습니다.

추후에 배우겠지만 부모가 자식에게 값을 전달할 땐 props 자식이 부모에 값을 전달할땐 on,emit을 사용합니다.

 

위 코드를 해석해보면 (위에서 설명했던 부분은 생략 위의 3번부터)

ddacker이라는 컴포넌트의 template에는 템플릿 문법 {{}}이 있기 때문에 동적인 데이터 속성이 필요로합니다. 그러기 때문에 id,pw,name,phone에 바인딩 될 props를 찾습니다. 해당 속성들은 현재 ''이 저장되어있기 때문에 만약 <ddacker></ddakcer>만 적는다면 id,pw,name,phone에는 아무값도 적히지 않겠죠.하지만 위의 ddacker 태그 내에 Vue 객체에 있는 data 속성중 bc.id를 넣었으니 props의 값과 매칭되어 data에 저장되어 있는 값을 호출 할 것입니다. 결과는 위 페이지를 참고 해주세요.

 

이처럼 props를 이용하게 되면 원하는 template에 원하는 값들을 작성할 수 있어 매우 유용합니다.