웹 프로그래밍 노트

3장 인스턴스 & 컴포넌트

1. Vue 인스턴스 속성 
 1) data : data 부분
 2) el : html id를 가진 요소를 의미함
 3) template : 화면에 표시할 html, css 등의 태그 요소를 정의하는 속성
 4) methods : 화면 로직의 제어와 관계된 메소드를 정의하는 속성 (이벤트 처리와 같은 로직)
 5) created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
 
2. 뷰 인스턴스 라이프 사이클

 1) 인스턴스 생성 → 인스턴스를 화면에 부착
  1> beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계 (data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고 돔과 같은 화면 요소에도 접근할 수 없음)
  2> created : data 속성과 methods 속성에 정의도니 값에 접근하여 로직을 실행할 수 있는 단계 (서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋은 단계)
  3> beforeMount : template 속성을 el에 지정한 화면 요소에 인스턴스를 부착하기 직전 단계
  4> mounuted : el 속성에 지정한 화면 요소에 인스턴스가 부착되고 호출되는 단계로 template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계

 2) 인스턴스를 화면에 부착 → 인스턴스 내용 갱신
  1> beforeUpdate : 인스턴스에 정의한 속성이 화면에 치환되는 단계 (데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계, 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음)
  2> update : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
 
 3) 인스턴스 내용 갱신 → 인스턴스 소멸  
  1> beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계 (인스턴스에 접근할 수 있음, 데이터를 삭제하기 좋은 단계)
  2> destroyed : 뷰 인스턴스가 파괴되고 나서 호출되는 단계

3. 컴포넌트 : 조합하여 화면을 구성할 수 있는 블록을 의미함
 1) 컴포넌트 등록 방법
  1> 전역 컴포넌트 등록
Vue.component('my-component', {
       template: '<div> 전역 컴포넌트가 등록되었습니다!</div>'
    });
  
  2> 지역 컴포넌트 등록
new Vue({
        components: {
  // 컴포넌트 이름 : 컴포넌트 내용
          'my-local-component': cmp
        }
});

4. 하위에서 상위 컴포넌트로 이벤트 전달하기
 1) 이벤트 발생 :
this.$emit('이벤트명');
 2) 이벤트 수신 :
<child-component v-on:show-log="printText"></child-component>
- show-log : 이벤트명
- printText : 상위 컴포넌트의 메소드명