구조적으로 UI를 설계하기 위해서는 컴포넌트가 필요하고, 화면을 그리기 위해서는 인스턴스가 필요하다.
뷰 인스턴스는 필수적으로 생성해야 하는 기본 단위이다.
인스턴스가 있어야 화면에 표시된다.
뷰 인스턴스 생성
new Vue({
...
});
<div id="app">{{ message }}</div>
<script src="httsp://cdn.jsdelivr.net/np/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js World!'
}
});
</script>
뷰 인스턴스 생성자
new Vue() 에서 Vue 를 생성자라고 한다.
뷰 라이브러리를 로딩하고 나면 접근할 수 있다.
이 생성자에는 필요한 기능을 미리 정의해 놓고 사용자가 기능을 재정의하여 편리하게 사용하게 한다.
객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장하고, 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법
일반적인 객체 지향 프로그래밍에서 사용하는 객체 정의 방식, 미리 정의한 속성과 메소드를 재활용하기 위해 사용한다.
뷰 인스턴스 옵션 속성
인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 말한다.
el - 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정한다.
template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
methods : 화면 로직 제어와 관계된 메서드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다.
created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성 (인스턴스가 생성되었을 때 호출할 동작을 정의하는 속성)
뷰 인스턴스의 유효 범위
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되는데 이를 뷰 인스턴스의 유효 범위라고 한다.
el 요소와 관련 있다.
인스턴스가 화면에 적용되는 과정은 아래와 같다.
1. 뷰 라이브러리 파일 로딩
2. 인스턴스 객체 생성(옵션 속성 포함)
3. 특정 화면 요소에 인스턴스를 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인
뷰 인스턴스 라이프 사이클
인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. (애플리케이션이 가지는 생명 주기)
각 라이프 사이클 속성에 실행되는 커스텀 로직을 라이프 사이클 훅이라고 한다. (개발자가 임의로 작성한 추가 로직)
라이프 사이클 속성에는 created, beforeCreate, beforeMount, mounted 등 인스턴스의 생성, 변경, 소멸과 관련된 8개의 속성이 있다.
beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed
뷰 라이프 사이클 과정은 아래와 같다.
1. 인스턴스 생성
- 이벤트 및 라이프 사이클 초기화
beforeCreate
- 화면에 반응성 주입
created : this.data 또는 this.fetchData()와 같은 로직 이용 data 속성과 methods 속성에 정의한 값에 접근해서 로직 실행 가능. 아직 인스턴스가 화면요소에 부착전이라 template 속성에 정의한 돔 요소 접근 불가. 서버에 데이터 요청해서 받아오는 로직 수행(HTTP)
- el, template 속성 확인
- template 속성 내용을 render()로 변환
beforeMount$el 생성 후 el 속성 값 대입
mounted : 인스턴스가 부착된 후 호출되는 단계, template 속성에 정의한 화면 요소에 접근 화면 요소 제어 로직 수행하는 단계, 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다. 이 경우에는 $nextTick() API를 활용해 HTML 코드로 최종 파싱될 때까지 가다렸다 돔 제어 로직에 추가한다.
2. 인스턴스를 화면에 부착
- 인스턴스의 데이터 변경
beforeUpdate : 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시한다. (데이터 관찰) 데이터 값을 갱신하는 로직을 추가한다.
- 화면 재 렌더링 및 데이터 갱신
updated : 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하는 단계, 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있으므로 이 때는 computed, watch 와 같은 속성을 사용한다. 가급적이면 갑 변경 로직은 beforeUpdate에서 하고, updated 에서는 변경 데이터의 화면 요소와 관련된 로직을 추가하는게 좋다.
3. 인스턴스 내용 갱신
- 인스턴스 접근 가능
beforeDestroy : 뷰 인스턴스의 데이터를 삭제하기 좋은 단계
- 컴포넌트, 인스턴스, 디렉티브 등 모두 해제
destroyed
4. 인스턴스 소멸
댓글