[도서] Do it! Vue.js - 인스턴스와 컴포넌트

Do it! Vue.js 입문 도서를 읽고 중요한 부분만 정리합니다!
구매링크: http://www.yes24.com/Product/Goods/58206961
참고링크1: http://wiki.x2bee.com/pages/viewpage.action?pageId=8553372
참고링크2: http://wiki.x2bee.com/pages/viewpage.action?pageId=8553499

뷰 인스턴스란?

뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

new Vue({
  //내용 작성
})

뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다.

생성자가 뭐더라,,

객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해두는 것!

사용하는 이유

뷰로 개발할 때 필요한 기능을 생성자에 미리 정의해놓고 사용자가 그 기능을 재정의하여 편리하게 사용하기 위하여 생성자를 사용한다.

뷰 인스턴스 속성

인스턴스를 생성할 때 재정의할 속성을 의미한다.

el 속성의 경우 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해주는 속성이다.

new Vue({
  el: '#app',     //el 속성
  data: {         //data 속성
    message: 'Hello Vue.js!'
  }
})

추가 속성들

template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
methods: 화면 로직 제어와 관계된 메서드를 정의하는 속성
created: 뷰 인스턴스가 생성되자마자 실행할 로직 정의하는 속성

뷰 인스턴스 라이프 사이클

인스턴스 상태에 따라 호출할 수 있는 속성들

• beforeCreate: 인스턴스가 생성되고 처음으로 실행됨, 돔 같은 화면 요소에 접근 불가능
• created: 서버에 데이터를 요청하여 받아오는 로직 수행하기 좋은 단계. data 속성과 method 속성이 정의되었기에 this.data, this.fetchData()와 같은 로직 사용 가능, template 속성에 정의된 돔 요소에 접근 불가능
• beforeMount: template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면요소 에 인스턴스를 부착하기 전 호출되는 단계
• mounted: el 속성에 지정한 화면 요소에 인스턴스가 부착된 뒤 호출되는 단계
• beforeUpdate: 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전 호출되는 단계. el 속성에서 지정한 화면 요소에 인스턴스가 부착된 뒤 인스턴스에 정의한 속성이 치환됨, 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 데이터 관찰을 함.
• updated: 데이터가 변경된 뒤 가상 돔으로 다시 화면을 그린 뒤 실행되는 단계. 이 단계에서 데이터 값 변경 시 무한 루프에 빠질 위험이 있음.
• beforeDestroy: 뷰 인스턴스가 파괴되기 직전 호출되는 단계.
• destroyed: 뷰 인스턴스가 파괴되고 난 뒤 호출되는 단계. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스도 파괴됨

인스턴스_예제.html

---

뷰 컴포넌트

조합하여 화면을 구성할 수 있는 블록

컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 컴포넌트의 관계는 자료구조의 트리와 같다.

전역 컴포넌트

여러 인스턴스에서 공통으로 사용한다.

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

전역 컴포넌트 화면에 나타나기까지의 과정

1. 뷰 라이브러리 파일 로딩
2. 뷰 생성자로 컴포넌트 등록 ==> vue 생성자 생성
3. 인스턴스 객체 생성 (옵션 속성 포함) ==> 속성이 포함된 인스턴스 객체 생성
4. 특정 화면 요소에 인스턴스 부착 ==> #app의 컴포넌트 명이 동일한 부분에 인스턴스 붙이기
5. 인스턴스 내용 변환 ==> 인스턴스와 컴포넌트의 내용을 정의된 내용으로 변환시키기
6. 변환된 화면 요소를 사용자가 최종 확인

전역컴포넌트_예제.html

지역 컴포넌트

특정 인스턴스에서만 유효한 범위를 가진다.

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

지역컴포넌트_예제.html

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

전역 컴포넌트는 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다.
지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해야한다.
=> 인스턴스의 유효 범위가 작성된 지역 컴포넌트는 첫 번째 인스턴스 영역에서만 제한되었기 때문이다. <my-local-component>태그는 HTML 사용자 정의태그로 인식한다.

지역전역컴포넌트_예제1.html
지역전역컴포넌트_예제2.html

---

뷰 컴포넌트 통신

뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 컴포넌트마다 자체적인 고유 범위를 갖기 때문이다.

컴포넌트간통신_예제.html

상, 하위 컴포넌트 관계

상위 컴포넌트에서 하위 컴포넌트로

props를 통해 값을 전달한다.

Vue.component('child-component',{
    props: ['props 속성 이름'];
});

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

상위→하위_예제.html

컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 된다.
인스턴스에 새로운 컴포넌트 등록시 기존에 있는 컴포넌트는 상위 컴포넌트가 되고 새로 등록된 컴포넌트는 자식 컴포넌트가 된다. 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 컴포넌트라고 한다.

하위 컴포넌트에서 상위 컴포넌트로

이벤트를 발생시켜 상위 컴포넌트로 신호를 보낸다.

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

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

하위→상위_예제.html

같은 레벨의 컴포넌트로

이벤트 버스는 지정한 2개의 컴포넌트 간의 데이터를 주고받을 수 있는 방법이다.
이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다.
단점: 컴포넌트가 많아질 경우 어디서 보냈는지 관리가 되지 않아 Vuex라는 상태 관리 도구가 필요하다.

//이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();

//이벤트를 보내는 컴포넌트
methods: {
    메서드명: function(){
        eventBus.$emit('이벤트명', 데이터);
    }
}

//이벤트를 받는 컴포넌트
methods: {
    created: function() {
        eventBus.$on('이벤트명', function(데이터){
            //내용
        });
    }
}

이벤트버스_예제.html