vue.js - 뷰 인스턴스, 컴포넌트 이해하기

뷰 인스턴스

뷰 인스턴스 생성자

- new Vue()로 인스턴스 생성 시 Vue를 생성자라고 함

- Vue생성자는 뷰 라이브러리 로딩하고 나면 접근 가능

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

뷰 인스턴스 옵션 속성

- 인스턴스 생성 시 재정의할 data, el, template 등의 속성 의미

- el : 미리 정의되어있으며, 뷰로 만든 화면이 그려지는 시점을 뜻함

- # 선택자는 CSS선택자 규칙과 같음

- template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성

- methods : 화면 로직제어와 관계된 메서드를 정의하는 속성, 화면의 전반적인 이벤트와 화면동작과 관련된 로직 추가

- created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

뷰 인스턴스 유효 범위

뷰 라이브러리 파일 로딩 -> 인스턴스 객체 생성 (옵션속성포함) -> 특정화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면요소로 변환

-> 변환된 화면요소를 사용자 확인

인스턴스 라이프사이클 속성

[인스턴스 생성]

beforeCreate - 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이플 사이클 단계 (속성 정의안됨)

created - data 속성과 method 속성 정의됨 / template속성에 정의된 돔요소로는 접근불가

beforeMount - render()함수 호출 직전의 로직 추가

mounted - el속성에 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계

-template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은단계

[인스턴스 화면에 부착]

beforeUpdate - 데이터 관찰, 관찰하고 있는데이터 변경시 가상 돔으로 화면을 다시 그리기전에 호출되는 단계

updated - 데이터 변경 후 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계 // 데이터 변경 후 화면 요소 제어

[인스턴스 내용갱신]

beforeDestroy - 뷰 인스턴스가 파괴되기 전에 호출되는 단계, 뷰인스턴스의 데이터를 삭제하기 좋은 단계임

destroyed

[인스턴스 소멸]

new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        },
        beforeCreate: function(){
          console.log("beforeCreate");
        },
        created: function(){
          console.log("created");
        },
        mounted: function(){
          console.log("mounted");
          this.message ='Hello Vue!';
        },
        updated: function(){
          console.log("updated");
        }
      });

뷰 컴포넌트

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

-화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음

-전역컴포넌트, 지역컴포넌트 등록 가능

전역 컴포넌트 등록

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

<div id="app">
      <button>컴포넌트 등록</button>
      <my-component></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script type="text/javascript">
      Vue.component('my-component',{
        template:'<div>전역컴포넌트가 등록되었습니다!</div>'
      });
      new Vue({
        el: '#app',
      });
    </script>

지역 컴포넌트 등록

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

뷰 컴포넌트 통신

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

: 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없음

1. 상위에서 하위 컴포넌트로 데이터 전달 : props 속성 사용

1) 하위 컴포넌트의 속성에 정의

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

2) child-component 태그에 v-bind 속성 추가

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

2. 하위에서 상위 컴포넌트로 이벤트 전달하기

-이벤트를 발생시켜 상위 컴포넌트에 신호를 보냄

1) 이벤트 발생

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

2)이벤트 수신

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

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

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

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

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

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

*해당 내용은 'Do it! vue.js 입문' 책(장기효저) 의 일부를 요약한 내용임