뷰 인스턴스

new Vue({ // 인스턴스
	el: '#app', // el 속성
	data: { // data 속성
		message: 'hello world!'
	}
});

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

위 코드는 new Vue()로 뷰 인스턴스를 생성하고, el 속성으로 뷰 인스턴스가 그려질 지점을 지정하며, data 속성에서 message 값을 정의하여 화면의 {{ message }} 에 연결한다.

인스턴스 안에는 미리 정의되어 있는 속성들과 API 들이 있기 때문에 이 기능들을 이용하여 빠르게 화면을 개발해 나갈 수 있다.

📌 인스턴스의 속성

• el: 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
• template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
• data: 뷰의 반응성(Reactivity)이 반영된 데이터 속성.
• methods: 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다.
• created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.
• watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성.

인스턴스 라이프 사이클

뷰의 인스턴스가 생성되어 소멸되기까지 거치는 과정을 의미한다.
인스턴스가 생성되고 나면 라이브러리 내부적으로 다음과 같은 과정이 진행된다.

• data 속성의 초기화 및 관찰 (Reactivity 주입)
• 뷰 템플릿 코드 컴파일 (Virtual DOM -> DOM 변환)
• 인스턴스를 DOM에 부착

// 뷰 라이프 사이클 다이어그램 (이미지 출처: Cracking Vue.js)

라이프 사이클 단계를 크게 나누면 생성, 부착, 갱신, 소멸의 4단계로 이루어진다.
부착~갱신 구간은 데이터가 변경되는 경우에만 거치게 된다.

라이프 사이클 훅

라이프 사이클 훅으로 인스턴스의 특정 시점에 원하는 로직을 구현할 수 있다.

예를 들어, 컴포넌트가 생성되자마자 데이터를 서버에서 받아오고 싶으면 created나 beforeMount 라이프 사이클 훅을 사용할 수 있다. 아래 코드는 인스턴스가 생성되자마자 액시오스로 HTTP GET 요청을 보내 데이터를 받아오는 코드이다.

new Vue({
  methods: {
    fetchData() {
      axios.get(url);
    }
  },
  created: function() {
    this.fetchData();
  }
})

구현할 때 주로 사용되는 라이프 사이클 훅은 created, beforeMount, mounted, destroyed 라고 한다.
API — Vue.js (라이프사이클 훅) 를 참고하자.

References

• Cracking Vue.js
• 캡틴판교(장기효)님의 Vue.js 시작하기 - Age of Vue.js