컴포넌트란?
컴포넌트란 조합하여 화면을 구성할 수 잇는 블록을 의미함.
컴포넌트 등록하기
1. 지역 컴포넌트 : 특정 인터페이스에서만 유효한 범위를 갖음
2. 전역 컴포넌트 : 여러 인스턴스에서 공통적으로 사용
전역 컴포넌트 등록
Vue.component('컴포넌트 이름', {
//컴포넌트 내용
});전역 컴포넌트에서 모든 인스턴에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행함. 컴포넌트 이름은 template 속성에서 사용할 html 사용자 정의 태그(custom tag) 이름을 의미함.
지역 컴포넌트 등록
new Vue({
components: {
'컴포넌트 이름': 컴포넌트 내용
}
});인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의
지역 컴포넌트와 전역 컴포넌트의 차이
차이를 알기 위해서는 인스턴스 유효 범위를 이해야 한다. 인스턴스의 유효범위란 HTML의 특정 범위 안에서만 인스턴스의 내용이 유효한 것을 의미한다.
컴포넌트 간 통신과 유효 범위
vue.js 의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위 (scope)를 갖기 때문이다.
컴포넌트의 유효 범위로 인해 다른 컴포넌트의 값을 직접 접근하지 못한다. 즉 vue.js에서 미리 정의해 놓은 데이터 전달 방식에 따라 일관된 구조로 작성하게 된다. 즉 애플리케이션이 모두 동일한 데이터 흐름을 가진다 -> 협엽에도 좋고, 코드를 빠르게 파악할 수 있음
상하위 컴포넌트 관계
가장 기본적인 데이터 전달 방법은 상위(부모)-하위(자식) 컴포넌트 간의 데이터 전달 방법이다.
상위에서 하위로는 props라는 특별한 속성을 전달!
하위에서 상위로는 이벤트만 전달 가능!
상위에서 하위 컴포넌트로 데이터 전달하기
Vue.component('child-component', {
props: ['props 속성 이름'],
});[❗]
인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트가 되고, 새로 등록된 컴포넌트는 하위(자식) 컴포넌트가 됨. 그리고 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 컴포넌트라고 함.
하위에서 상위 컴포넌트로 데이터 전달하기
이벤트를 발생시켜 상위 컴포넌트에 신호를 보낸다.
[❗]
vue.js 공식 사이트에서 이벤트 발생 사용 시 하위에서 상위로 데이터를 전달하는 방법은 X, 뷰의 단방향 데이터 흐름에 어긋나기 때문. 하지만 복잡한 뷰 애플리케이션을 구축할 때는 이벤트 버스를 이용하여 전달할 수도 있다.
이벤트 발생과 수신 형식
//이벤트 발생
this.$emit('이벤트명');
//이벤트 수식
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>관계 없는 컴포넌트 간 통신- 이벤트 버스
이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법이다. 이를 이용하면 상하위 관계 없이도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있음!
이벤트 버스를 활용하면 props 속성을 이용하지 않고도 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있어 편리하지만 컴포넌트가 많아지면 관리가 되지 않는 문제가 발생할 수 있다 😓😓 그래서 뷰엑스(Vuex)라는 상태관리도구가 필요함!
[Reference]
Do it Vue.js 입문(이지스퍼블리싱)
