컴포넌트(Component)

1. 컴포넌트(Component)란?

화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 화면을 여러 영역으로 쪼개서 활용할 수 있는 형태로 관리하게 되면 코드를 다시 사용하기가 훨씬 편리하다는 장점을 가지고 있습니다. 

컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있습니다.

 

1) 전역 컴포넌트 

Vue.component('컴포넌트 이름', {

        // 컴포넌트 내용

});

전역 컴포넌트 등록 형식에는 컴포넌트 이름과 내용이 있습니다. 

컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미

컴포넌트 내용 : template, data, methods 등 인스턴스 옵션 속성을 정의

 

사용 예

전역 컴포넌트

데이터를 출력할땐 함수형으로 작성

 

전역 컴포넌트가 발생하는 과정

2) 지역 컴포넌트

new Vue({

    components : {

        '컴포넌트 이름' : 컴포넌트 내용

    }

});

 

사용 예

 

 

2. 전역 컴포넌트와 지역 컴포넌트의 차이

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있습니다. 

지역 컴포넌트는 새로운 인스턴스를 사용할 때마다 매번 등록해줘야 합니다.

 

 

 

3. 컴포넌트간의 통신

각 컴포넌트는 유효범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없습니다.

따라서 Vue Framework 자체에서 정의한 컴포넌트 데이터 전달 방법을 이용해야 합니다.

기본적인 데이터 전달 방법은 부모(상위) - 자식(하위) 방식의 데이터 전달 방법입니다.

 

 

 

1) 상위에서 하위로 데이터 전달

컴포넌트에 props 속성을 가지고 있다면 그 컴포넌트는 하위 컴포넌트로 보면 됩니다.

상위 컴포넌트 HTML 코드

<child-component v-bind:props 속성 이름 = "상위 컴포넌트의 data 속성"></child-component>

 

하위 컴포넌트 props 정의 방식

Vue.component('child-component', {

   props : ['props 속성 이름'],

});

 

사용 예

① new Vue()로 인스턴스 생성

② Vue.component()로 하위 컴포넌트인 'child-component' 등록

③ child-component의 내용에 props 속성으로 propsdata를 정의

④ HTML에 컴포넌트 태그 추가. v-bind 속성을 보면, v-bind:propsdata="msg"는 상위 컴포넌트의 msg 속성 값인 

   'Passed from Parent Component'텍스트를 하위 컴포넌트의 propsdata로 전달

⑤ child-component의 template 속성에 정의된 <p>{{propsdata}}</p>는 'Passed from Parent Component'로 변경

 

여기서 지금 하위 컴포넌트는 지정했지만 상위 컴포넌트는 딱히 지정하지 않았습니다. 그럼에도 불구하고 뷰 인스턴스는 상위 컴포넌트가 있는 것처럼 하위 컴포넌트에 props를 전달했습니다.

그 이유는 컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 되었기 때문입니다.

이렇게 기존에 있는 컴포넌트가 상위 컴포넌트가 되고 새로 등록된 컴포넌트는 하위 컴포넌트가 됩니다.

 

 

2) 하위에서 상위로 이벤트 전달

하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신해 상위 컴포넌트의 메서드를 호출합니다.

이벤트 발생과 수신은 $emit과 v-on: 속성을 이용

// 이벤트 발생

this.$emit('이벤트명');

 

// 이벤트 수신

<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>

$emit을 호출하면 괄호 안의 이벤트가 발생합니다. 그리고 일반적으로 $emit을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부입니다. 따라서 $emit을 호출할 때 사용하는 this는 하위 컴포넌트를 가리킵니다.

 

호출한 이벤트는 하위 컴포넌트를 등록하는 태그(상위 컴포넌트의 template속성에 위치)에서 v-on:으로 받습니다.

① [show] 버튼을 클릭하면 클릭 이벤트에 따라 showLog() 메서드가 호출

② this.$emit('show-log')가 실행되면서 show-log이벤트 발생

③ show-log이벤트는 v-on:show-log에 전달되고, v-on:show-log의 대상 메서드인 상위 컴포넌트의 메서드

    printText가() 실행

④ printText는 console.log를 출력하는 메서드이므로 마지막으로 콘솔에 received an event가 출력

 

실행 결과