Vue.js 시작하기 - 컴포넌트

chael_lo·2021년 8월 24일

vue.js

Vue.js

목록 보기

5/8

뷰 컴포넌트

화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다.
컴포넌트 간의 관계도 생긴다.

컴포넌트로 관리하는 이유

코드의 재사용성이 올라가고 화면을 빠르게 제작할 수 있다.

컴포넌트 생성

인스턴스를 생성하면 기본적으로 Root 컴포넌트가 생긴다.

<div id="app"></div>

<script>
 new Vue({
    el: '#app'
  })
</script>

전역 컴포넌트

주로 플러그인이나 라이브러리 형태로 사용한다.

Vue.component('컴포넌트 이름', 컴포넌트 내용);

app-header라는 컴퍼넌트는 Root 컴포넌트 아래에 생성이 되며,
HTML에서 작성한 templete의 내용으로 바뀌어서 보여진다.

<div id="app">
    <app-header></app-header>
</div>
    
<script>
Vue.component('app-header', {
      template: '<h1>Header</h1>'
    });
</script>

지역 컴포넌트

지역 컴포넌트를 사용하려면 인스턴스마다 components를 생성을 해주어야 한다.
여러 개를 등록할 수 있기 때문에 component뒤에 s가 붙어있다.

 new Vue({
   el: '#app',
   components: {//객체 리터럴
     //'키': '값',
     //'컴포넌트 이름': 컴포넌트 내용,
   }
 })

사용할 컴포넌트 태그 이름과 내용을 인스턴스 안에 객체 리터럴 형태로 넣어 사용한다.

<div id="app">
    <app-footer></app-footer>
</div>
<script>
new Vue({
     el: '#app',
     components:{
     	'app-footer': {
            template: '<footer>footer</footer>'
         }
  	}
})
</script>

컴포넌트 통신

뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다.
컴포넌트를 여러개 생성할 때 자식 부모 관계가 만들어 지는데 관계가 만들어지면서 데이터를 주고 받기 위한 규칙이 생긴다.

상위 컴포넌트 -> 하위 컴포넌트(데이터를 내려준다고 표현)
==> props 전달
하위 컴포넌트 -> 상위 컴포넌트(이벤트를 올려준다고 표현)
==> 이벤트 발생

컴포넌트 통신 규칙이 필요한 이유

특정 컴포넌트의 변화(데이터, 상태)에 따라서 나머지 컴포넌트가 유기적으로 데이터를 주고 받았을 때 데이터의 방향을 예측하기가 어렵다.

통신 규칙을 세워서 데이터가 내려오고 이벤트를 올려준다면 데이터의 흐름을 추적할 수 있다.

props

상위 컴포넌트의 속성을 하위 컴포넌트로 내려받을 때 사용한다.

<!--app-header는 하위 컴포넌트 이름-->
<app-header v-bind:props 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>

사용할 컴포넌트의 속성을 별도의 변수(카멜케이스)로 빼서 객체를 생성한 후 인스턴스 안에 넣어준다.

var appHeader = {
  template: '<h1>{{ propsdata }}</h1>',
  props:['propsdata']
}

new Vue({
    el: '#app',
    components:{
      'app-header': appHeader
    },
    data:{
      message: 'hi',
      num: 10
    }
});

하위 컴포넌트에서 상위 컴포넌트의 속성 중 사용할 속성을 v-binds 뒤에 적어 연결해준다.

<div id="app">
    <!-- 상위 컴포넌트의 message의 내용(hi)을 template에 담아 출력 -->
    <app-header v-bind:propsdata="message"></app-header>
</div>

event emit

하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올려주는 것을 말한다.

<!--app-header는 하위 컴포넌트 이름-->
<!--v-on은 vue에서 제공하는 속성-->
<app-header v-on:하위 컴포넌트에서 발생한 이름="상위 컴포넌트의 메서드 이름"></app-header>

컴포넌트 구성
상위 컴포넌트: #app
하위 컴포넌트: appHeader

   <div id="app">
        <app-header v-on:pass="logText"></app-header>
    </div>

appHeader(하위 컴포넌트)의 구성
appHeader는 클릭 이벤트가 있는 버튼을 templete으로 한다.
버튼에는 passEvent라는 메서드가 연결되어 있고,
클릭할 때마다 $emit을 통하여 pass를 전달한다.

$emit: vue에서 제공하는 api
pass : 이벤트 이름

 var appHeader = {
    //클릭 이벤트 v-on:click
    template: '<button v-on:click="passEvent">click me</button>',
   methods:{
     //button을 클릭했을 때 생기는 이벤트를 정의한 함수
     passEvent: function(){
       this.$emit('pass');
     }
   }
}

click me 버튼을 눌렀을 때
= passEvent가 실행 되었을 때

#app(상위 컴포넌트)의 구성

 new Vue({
     el:'#app',
     components:{
       'app-header': appHeader,
     },
     methods:{
       logText: function(){
         console.log('hi');
       },

     }
});

하위 컴포넌트에서 pass라는 이벤트가 왔을때 상위 컴포넌트 태그에서 받아서 logText라는 메서드가 실행된다.

<app-header v-on:pass="logText"></app-header>

뷰 인스턴스에서의 this

this는 자바스크립트 객체 속성에서 다른 속성을 가리킬 때 주로 사용한다.

var obj = {
  	num: 10
	getNum = function(){
      	//this는 해당 객체인 obj를 바라본다.
    	console.log(this.num)//출력:10
    }
}

뷰 인스턴스에서 마찬가지로 this는 해당 객체를 바라본다.

 var vm = new Vue({
            el:'#app',
            components:{
                'app-content': appContent
            },
            methods:{
                increaseNumber: function(){
                  //data의 num을 this로 받았다.
                    this.num = this.num + 1;
                }

            },
            data:{
                num: 10
            }
        });