[Vue] 뷰 컴포넌트 (props, emit, eventBus)

Do it! Vue.js 입문을 읽고 정리한 내용입니다.

뷰 컴포넌트

컴포넌트란

컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다.

컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있기 때문에

• 코드의 재사용성이 높아진다.
• 다른 사람이 작성한 코드를 직관적으로 이해할 수 있다.

컴포넌트 등록하기

컴포넌트를 등록하는 방법은 두 가지가 있다.

• Local : 특정 인스턴스에서만 유효한 범위를 갖는다.
• Global : 여러 인스턴스에서 공통으로 사용할 수 있다.

전역 컴포넌트 등록

전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다.

전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다.

Vue.component(컴포넌트 이름, {
    // 컴포넌트 내용
});

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

컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성한다.

컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.

인스턴스가 생성 되고 인스턴스 내용이 화면 요소로 변환될 때 컴포넌트 태그도 함께 변환된다.

지역 컴포넌트 등록

지역 컴포넌트는 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.

new Vue({
   components: {
    '컴포넌트 이름': 컴포넌트 내용
}
})

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

지역 컴포넌트와 전역 컴포넌트의 유효 범위는 다르다.

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

뷰 컴포넌트 통신

컴포넌트 간 통신과 유효 범위

뷰에서는 각 컴포넌트의 유효범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다. 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야한다.

상, 하위 컴포넌트 관계

상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다.

상위에서 하위로는 props라는 속성을 전달하고 하위에서 상위로는 이벤트만 전달할 수 있다.

상위 => 하위로 데이터 전달

props 속성

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성

1. 하위 컴포넌트에 정의한다.
2. 상위 컴포넌트 HTML 코드에 등록된 하위 컴포넌트의 태그에 v-bind 속성을 추가한다.

<child-component v-bind:props의 속성이름="하위로 전달할 값"></child-component>
<!-- 축약 -->
<child-component :속성이름="하위로 전달할 값"></child-component>

인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트가 되고, 새로 등록된 컴포넌트는 하위 컴포넌트가 된다. 그리고 인스턴스는 최상위 컴포넌트라고 부른다.

하위 => 상위로 이벤트 전달하기

이벤트 발생과 수신

하위 컴포넌트에서 상위 컴포넌트로 통신하기 위해서는 이벤트를 발생시켜 상위 컴포넌트에 신호를 보낸다. 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 것이다.

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

<!--이벤트 수신-->
<child-compoent v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>
<!-- 축약 -->
<child-compoent @이벤트명="상위 컴포넌트의 메서드명"></child-component>

$emit를 호출하면 괄호 안에 정의된 이벤트가 발생한다. 일반적으로는 하위 컴포넌트의 특정 메소드 내부에서 호출된다. 따라서 this는 하위 컴포넌트를 가리킨다.

호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on:으로 받는다.

같은 레벨의 컴포넌트 간 통신

뷰는 상위에서 하위로만 데이터를 전달해야하는 기본적인 통신 규칙을 따르기 때문에 옆 컴포넌트에 값을 전달하려면 하위에서 공통 사우이 컴포넌트로 이벤트를 전달한 후 공통 상위 컴포넌트에서 2개의 하위 컴포넌트에 props를 내려 보내야 한다.

컴포넌트 고유의 유효 범위 때문에 다른 컴포넌트의 값을 직접 참조하지 못하므로 기본적인 데이터 전달 방식을 활용해야하는데 상위 컴포넌트가 필요 없음에도 불구하고 같은 레벨 간에 통신하기 위해 강제로 사위 컴포넌트를 두어야하는 불편함이 생긴다.

이를 해결하기 위한 방법이 이벤트 버스이다.

관계 없는 컴포넌트 간 통신 - 이벤트 버스

이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고 받을 수 있는 방법이다.

이벤트 버스 형식

const eventBus = new Vue();

// sender
methods: {
//(...)
eventBus.$emit('eventName', data);   
}


// receiver
methods: {
    created: function() {
    eventBus.$on('eventName', function(data) {

});
}
}

애플리케이션 로직을 담는 인스턴스와 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다.

• 보내는 쪽 : .$emit()
• 받는 쪽: .$on()을 구현한다.

이벤트 버스를 활용하면 props 속성을 이용하지 않고도 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있지만 컴포넌트 수가 많아지면 관리가 힘들어지는 문제가 있다. 이를 해결하기 위해서는 뷰엑스라는 상태 관리 도구가 필요하다.