뷰 인스턴스의 정의와 속성
뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.
뷰 인스턴스 생성
<!-- 뷰 인스턴스 형식 -->
new Vue({
..
});
뷰 인스턴스를 사용하기 위해 위 코드와 같은 형식으로 뷰 인스턴스를 생성한다. 아래 예제 코드에서 인스턴스와 관계된 부분을 다시 한 번 살펴보자.
<!-- 'Hello Vue.js'를 출력하는 코드 -->
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({ /////////////////
el: '#app', //
data: { // 인스턴스
message: 'Hello Vue.js!' // 생성부분
} //
}); /////////////////
</script>
</body>
</html>
먼저 ‘Hello Vue.js!’ 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였다. 그리고 인스턴스 안에 el속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message 값을 정의하여 화면의 {{ message }} 에 연결하였다. 그럼 각 요소에 대해 자세히 알아보자.
뷰 인스턴스 생성자
new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다.
뷰 인스턴스 옵션 속성
뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 때 data, el, template 등의 속성을 의미한다. 예를 들어, 위 예제 코드에서는 data라는 속성 안에 message라는 새로운 속성을 추가하고 ‘Hello Vue.js!’라는 값을 주었다. el속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미한다.
여기서 el속성의 값으로 주어진 #app은 화면의 돔 요소 중 app이라는 아이디를 가진 요소를 의미하며 #선택자는 CSS 선택자 규칙과 같다.
이 외에도 template, methods, created 등 미리 정의되어 있는 속성을 사용할 수 있다.
| 속성 | 설명 |
template | 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다. |
methods | 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다. |
created | 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성. 뷰 인스턴스 라이프 사이클 부분에서 추가로 설명한다. |
뷰 인스턴스의 유효 범위
인스턴스의 유효 범위란?
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타나는데, 이를 인스턴스의 유효 범위라고 한다. 인스턴스의 유효 범위는 el속성과 밀접한 관계가 있다.
<div id="app">
{{ message }}
</div>
...
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
위 코드의 뷰 인스턴스에서 el속성의 값은 ‘app’이라는 아이디 값을 가진 돔 요소 즉, 아이디가 ‘app’인 <div> 요소이며, 이 요소가 위 뷰 인스턴스의 유효 범위이다. 즉 위 인스턴스의 data속성에 추가된 message 속성과 그 값은 ‘app’이라는 아이디를 가진 <div> 요소 안에서 유효하다.
인스턴스의 유효 범위 확인
다음 코드와 같이 만약 인스턴스의 유효범위를 벗어나서 message 속성을 불러온다면, 어떻게 될까?
<div id="app">
</div>
{{ message }}
이 경우 브라우저는 message의 값인 ‘Hello Vue.js!’ 가 아닌 ‘{{ message }}’ 를 그대로 출력할 것이다.
뷰 인스턴스 라이프 사이클
위에서 뷰 인스턴스의 옵션 속성 중 인스턴스가 생성되었을 때 호출할 동작을 정의하는 created에 대하여 간단히 설명했다. 이처럼 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직(개발자가 임의로 작성한 추가 로직)을 라이프 사이클 훅(hook)이라고 한다.
라이프 사이클 속성은 인스턴스의 생성, 변경, 소멸과 관련되어 총 8개가 있다.
이 그림은 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램이다.
뷰 인스턴스 라이프 사이클의 상세 내용은 아래 표를 참고하여 잘 익혀두자.
| 속성 | 설명 |
beforeCreate | 인스턴스 생성 후 가장 처음 실행되는 단계. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다. |
created | data속성과 methods속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data속성과 methods속성에 정의된 값에 접근하여 로직을 실행할 수 있다. 다만, 아직 인스턴스가 화면 요소에 부착되기 전이므로 template속성에 정의된 돔 요소에 접근할 수 없다.서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다. |
beforeMount | template 속성에 지정한 마커업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계. render() 함수가 호출되기 직전의 로직을 추가하기 좋다. |
mounted | el 속성에서 지정한 화면 요소에 인스턴스가 부탁되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다. 다만, 돔에 인스턴스가 부착되자마자 바로 호출되므로 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다. |
beforeUpdate | el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시한다. 이를 데이터 관찰이라고 한다. 또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않는다. |
updated | 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch 와 같은 속성을 사용해야 한다. 데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고, 여기서는 변경 데이터의 화면 요소(돔)와 관련된 로직을 추가하는 것이 좋다. |
beforeDestroy | 뷰 인스턴스가 파괴되기 직전에 호출되는 단계이다. 이 단계에서는 아직 인스턴스에 접근할 수 있다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다. |
destroyed | 뷰 인스턴스가 파괴되고 나서 호출되는 단계이다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다. |