Vue.js 기초(2)_Component

이번에는 컴포넌트에 대해 알아보겠습니다.

 

뷰에서는 화면 분할을 사용할 때 컴포넌트라는 개념을 사용해서 분할합니다.

그래서 보다 직관적으로 코드를 이해할 수 있습니다.

 

코드를 살펴보겠습니다.

App.vue 파일

저는 이런식으로 컴포넌트를 구성했습니다.

global-component는 전역 컴포넌트

my_component는 지역 컴포넌트

parent-component는 부모-자식 관계에 있는 컴포넌트 입니다.

 

전역 컴포넌트부터 살펴보겠습니다.

전역 컴포넌트는 전역 변수처럼 어디에서든지 쓰일 수 있는 컴포넌트입니다.

import GlobalComponent from "./components/global-component"; 처럼 선언을 한 후 

해당위치에 vue파일을 만들어줍니다.

이제 global-component 파일을 보겠습니다.

global-component.vue 파일

이런 식으로 만들어 봤습니다. 그리고 버튼을 누르면 글자가 나타나도록 했습니다.

main.js 파일

전역 컴포넌트의 경우 main.js 파일에도 이렇게 추가해야합니다.

main.js는 뷰 프로젝트를 만들면 자동적으로 만들어 집니다.

따라서 추가해야할 부분은

  import GlobalComponent from './components/global-component'

  Vue.component(GlobalComponent.name, GlobalComponent)

이 2가지 입니다.

화면입니다. 처음 화면은 위의 그림이고, click버튼을 누르면 글자가 보이게 됩니다.

 

다음은 지역 컴포넌트 입니다.

지역 컴포넌트가 전역 컴포넌트보다 보편적으로 사용이 됩니다.

지역 컴포넌트는 선언된 곳에만 사용이 가능합니다.

local_component.vue 파일

저는 my_component라 이름을 붙이고 local_component라고 만들었습니다. 

이러면 아까 보신 화면에서 '지역 컴포넌트 생성' 부분을 담당하게 됩니다.

여기다가 본인이 원하시는 내용을 입력하시면 됩니다.

 

다음으로 컴포넌트 간의 데이터 공유에 대해 알아보겠습니다.

뷰에서는 컴포넌트로 화면 구성이 되기 때문에, 원하는 데이터를 모든 컴포넌트에서 사용할 수는 없습니다.

여기서 사용되는 개념이 상위, 하위 컴포넌트입니다.

상위->하위로 데이터를 넘길 때는 props 속성을 이용합니다.

하위->상위로 데이터를 넘길 때는 event emit(이벤트 발생)을 이용합니다.

그럼 위에서 선언한 parent-component에 대해 알아보겠습니다.

parent-component.vue 파일

parent-component.vue 파일입니다.

child-component를 선언해서 상위, 하위 관계를 맺었습니다.

다음은 child-component를 살펴보겠습니다.

child-component.vue

이제 동작 순서에 대해 알아보겠습니다.

1. 위의 화면처럼 파일을 만들고 진행하면 show버튼이 생성됩니다.
2. show버튼을 클릭 시 v-on:click="showLog"가 실행되고, show-log 이벤트가 발생됩니다.
3. show-log 이벤트는 v-on:show-log에 전달되고, 그에 해당되는 메서드인 printText가 실행됩니다. 
4. printText()는 입력된 로그를 출력합니다.

화면으로 확인을 한다면,

show버튼을 클릭한다면 로그창에 received an event를 얻을 수 있게 됩니다. 

 

순서가 좀 이상하지만 이번에는 props에 대해 알아보겠습니다.

App.vue

child-component.vue

(위의 코드에서 v-bind:propsData -> 이부분 모두 붙여서 써야합니다. 띄어쓰기를 하면 오류가 납니다. 경험담...)

이런 식으로 코드를 설정한 후 실행을 하신다면

화면

위와 같은 화면을 얻을 수 있습니다.

동작 순서에 대해 알아보겠습니다.

1. 하위 컴포넌트인 child-component를 등록합니다.
2. child-component의 내용에 props속성으로 propsData를 정의합니다.
3. v-bind:propsData="msg"는 상위 컴포넌트의 msg값을 하위 컴포넌트의 propsData로 전달하였습니다.
4. child-component에서 {{propsData}} 에 넘겨진 msg값이 출력됩니다.

 

컴포넌트 관계에서 항상 상위, 하위 컴포넌트 관계가 아닐 수도 있습니다.

그럴 경우 데이터 이동이 힘들 수 있습니다. 

그래서 등장한 개념이 '이벤트 버스'입니다.

App.vue

다음과 같이 local-component와 child-component라는 지역 컴포넌트를 생성했습니다.

2개의 컴포넌트는 상위, 하위 컴포넌트 관계가 아닙니다. 그럴 때 2개의 컴포넌트에서 데이터 전송을 위해서는 이벤트 버스가 필요합니다.

./components/eventBus.js 라는 경로로 eventBus.js파일을 만듭니다.

eventBus.js

그리고 다음과 같이 작성합니다.

local-component.vue

child-component.vue

각각의 뷰 코드입니다.

이 상태로 실행하시면 다음과 같은 화면을 얻을 수 있습니다.

이벤트 버스를 이용한 화면

클릭 버튼을 계속 누르면 로그창에서 숫자가 증가하는 것을 알 수 있습니다.

근데 로그창만 증가하고 화면은 변하지 않는것을 알수 있습니다.

로그창과 화면 모두 변하도록 하겠습니다.

child-component.vue

위와 같이 child-component.vue에서 created() 안에 있는 부분에 대해서 람다식 형태로 바꾼다.

그러고 난 다음 실행을 하면

클릭을 누를 때마다 값이 변하는 것을 볼 수 있다.

** 이유: function(clickedCount)를 쓰면 this는 function을 가리키게 된다. 뷰에 적힌 receivedClickCount와는 별개의 녀석이 되어서 값이 변하지를 않는다.

        대신 람다식을 쓰게 된다면 this는 뷰를 가리키게 된다. 그래서 뷰에 적힌 receievedClickCount가 변하게 된다.

나는 람다식에 대해 아직 이해를 잘 못하고 있는 것 같다. 람다식에 대해 잘 이해해야할 필요성은 있는데,,,, 람다식 어렵다...

 

이렇게 해서 컴포넌트 부분을 마칩니다.

다음은 뷰 라우터에 대해서 알아보겠습니다.

<template>
    <section>
        ReceivedClickCount : {{receivedClickCount}} 
    </section>
</template>
<script>
import EventBus from './eventBus.js'
export default {
    name: "child-component",
    data: function() {
        return {
            receivedClickCount: 0
        }
    },
    created() {
        EventBus.$on("use-eventbus", clickedCount => {
            this.receivedClickCount = clickedCount;
            console.log(this.receivedClickCount);
        });
    }
}
</script>