Vue.js의 핵심인 컴포넌트에 대한 간략한 정리

Vue.js의 핵심이자 꽃이라 할 수 있는 컴포넌트(Component)에 대해 간략히 정리해 보려고 합니다.

Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발을 하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용합니다.

또한 각각의 컴포넌트간 데이터의 이동에 대해서는 단방향 이동만 가능하다고 합니다.
부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식 컴포넌트가 읽어 올 수 있습니다.
가진 것을 모두 퍼 주는 부모님의 내리사랑 같은거에요.
하지만 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 넘기기 위해서는 기본적으로는 넘길 수 없고 Event를 사용해서 보내 줘야지만 넘길 수 있습니다.
엄마 통장으로 돈 부쳤어 살림에 보테~

컴포넌트를 사용할 경우 장점은 재사용성이 매우 뛰어 납니다. 한번 작성한 컴포넌트는 다른 곳에서 여러번 사용할 수 있습니다.
단위 테스트가 용이 합니다. 테스트를 컴포넌트 단위로 하면 되기 때문에 명확하고 쉽게 수정도 가능하게 됩니다.

컴포넌트 등록 방법

컴포넌트는 전역으로 등록 할 수도 있고 지역으로 등록할 수도 있습니다.
전역으로 등록할 경우 모든 자식 컴포넌트에서 해당 컴포넌트를 사용할 수 있습니다.
하지만 전역컴포넌트를 남용할 경우는 결과물이 상당히 커지는 사례가 생길 수 있습니다.
지역으로 등록할 경우는 일단 만들어 놓은 지역 컴포넌트를 불러와서 사용 할 수 있습니다.
그리고 전역변수와 달리 자식 컴포넌트에서는 자동으로 사용할 수 가 없습니다. 자식 컴포넌트에서 사용하려면 다시 자식 컴포넌트에서 불러와서 사용해야 합니다.
필요할 경우 컴포넌트를 불러와야 하는 불편함이 있지만 결과물 코드용량을 줄일 수 있는 잇점이 있습니다.

전역 컴포넌트 등록

Vue.component('컴포넌트 이름', '옵션')

• 컴포넌트 이름 : 이 컴포넌트를 사용하기 위한 이름입니다.
• 옵션 : 컴포넌트를 렌더링할 때 필요한 여러 옵션들을 작성합니다.

Vue.component('component-a', { template: '<div> hello world AAA !!!</div>'})
Vue.component('component-b', { template: '<div> hello world BBB !!!</div>'})
Vue.component('component-c', { template: '<div> hello world CCC !!!</div>'})

new Vue({ el: '#app' })

실제로 컴포넌트는 위와 같이 등록합니다.

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
</div>

등록된 컴포넌트는 위와 같이 컴포넌트 이름을 사용합니다.

<div id="app">
  <div> hello world AAA !!!</div>
  <div> hello world BBB !!!</div>
</div>

그러면 렌더링 후에는 위와 같이 구현됩니다.

지역 컴포넌트 등록

var ComponentD = { template: '<div> hello world DDD !!!</div>' }
var ComponentE = { template: '<div> hello world EEE !!!</div>' }
var ComponentF = { template: '<div> hello world FFF !!!</div>' }

지역 컴포넌트는 위와같이 등록합니다.

new Vue({
  el: '#app',
  components: {
    'component-d': ComponentD,
    'component-e': ComponentE
  }
}) 

사용할 컴포넌트 들만 등록하여 사용합니다.

<div id="app">
  <component-d></component-d>
  <component-e></component-e>
</div>

등록된 컴포넌트를 사용하는 것은 전역이나 지역이나 동일 합니다.

<div id="app">
  <div> hello world DDD !!!</div>
  <div> hello world EEE !!!</div>
</div>

그러면 렌더링 후에는 위와 같이 구현됩니다.

컴포넌트 옵션 요소

옵션	설명	예제	비고
template	해당 컴포넌트의 DOM형태를 구성	template : '<div>hello</div>'
data	컴포넌트가 바라보는 data 객체를 Function 형태로 지정	data : function() {return {msg: "hello"}}	객체를 직접 사용할 수 없고 Functio으로 객체를 리턴시켜 사용해야함
props	자식 컴포넌트에게 값을 전달하기 위해 props 배열 또는 객체를 지정하여 사용	props: ['msg']	props: {msg: {type: String, default: 'Hello'}}
methods	자식 컴포넌트에서 부모 컴포넌트로 이벤트 함수로 값을 넘길때 주로 사용함	methods: {eventCl: function(e) {this.$emit('parentPn', e.target.innerText);}}