03-1 뷰 인스턴스
뷰 인스턴스의 정의와 속성
뷰 인스턴스(instance): 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
- 뷰 인스턴스 생성
아래의 코드는 화면에 'Hello Vue.js'를 출력하는 코드이다.
이 코드에서는 먼저, 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였다.
그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하였다.
마지막으로 data 속성에 message 값을 정의하여 화면의 {{message}}에 연결하였다.
<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>
- 뷰 인스턴스 생성자
뷰 인스턴스 생성자는 new Vue()로 인스턴스를 생성할 때의 Vue를 말한다. 이는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.
생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 그 기능을 재정의하여 편리하게 사용하기 위해서이다.
뷰 인스턴스 옵션 속성
뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template, methods, created 등의 속성을 의미한다.
- el 속성: 뷰로 만든 화면이 그려지는 시작점을 의미(뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해주어야한다. + '#', '.' 선택자 사용)
- template 속성: 화며에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성, 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
- methods 속성: 화면 로직 제어와 관계된 메서드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다.
- created 속성: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
뷰 인스턴스의 유효 범위
- 인스턴스의 유효범위란?
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타나는데 이를 인스턴스의 유효 범위라고 한다.
이 유효범위는 el 속성과 밀접한 관계가 있다!
- 인스턴스가 화면에 적용되는 과정
- 뷰 라이브러리 파일 로딩
- 인스턴스 객체 생성(옵션 속성 포함)
- 특정 화면 요소에 인스턴스를 붙임
- 코드를 실행하면 el 속성에서 지정한 화면 요소(돔)에 인스턴스가 부착된다.
- ex) 위의 코드에서 정의했던 #app에 부착된다.
- 인스턴스 내용이 화면 요소로 변환
- 인스턴스에 정의한 옵션 객체의 내용(data 속성)이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환된다.
- ex) {{ message }}가 data 속성에 정의한 'Hello Vue.js'로 치환된다.
- 변환된 화면 요소를 사용자가 최종 확인
그런데 여기서 만약 코드가 아래와 같이 변경된다면 message는 인스턴스의 유효범위인 <div id="app">태그를 벗어났으므로 message 속성의 값이 Hello Vue.js!로 변경되지 않고 {{ message }} 그래로 출력되게 된다.
뷰 인스턴스 라이프 사이클
- 라이프 사이클 속성: 인스턴스의 상태에 따라 호출할 수 있는 속성
- ex) beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destoryed
- 라이프 사이클 훅: 각 라이프 사이클 속성에서 실행되는 커스텀 로직(= 개발자가 임의로 작성한 추가 로직)
아래의 그림은 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램이다.
라이프 사이클의 단계를 크게 나누면 인스턴스의 생성 -> 생성된 인스턴스를 화면에 부착 -> 화면에 부착된 인스턴스의 내용이 갱신 -> 인스턴스가 제거되는 소멸의 4단계로 이루어진다.
여기서 부착 -> 갱신의 구간은 데이터가 변경되는 경우에만 거치게 된다.
- beforeCreate
- 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계
- data, methods 속성이 아직 인스턴스에 정의 되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.
- created
- beforeCreate 다음에 실행되는 단계
- data, methods 속성이 정의되었기 때문에 data, methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있다. (this.data, this.fetchData()와 같은 로직 사용)
- 그러나 인스턴스가 화면 요소에 부착되기 전이라서 template 속성에 정의된 돔 요소로는 접근할 수 없다.
- data, methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계라서
-> 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.
- beforeMount
- template 속성에 지정한 마크업 속성을 render()함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 단계
- render() 함수가 호출되기 직전의 로직을 추가하기 좋다.
- mounted
- 인스턴스가 부착되고 난 후 호출되는 단계
- template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계
- 그러나 돔에 인스턴스가 부착되자마자 바로 호출되므로 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다.(이 경우에는 $nextTick() 사용하면 됨)
- beforeUpdate
- 인스턴스에 정의한 속성들이 화면에 치환된다.
- 치환된 값은 뷰의 반응성(코드의 변화에 따라 화면이 반사적으로 반응하여 화면을 빠르게 갱신하는 것)을 제공하기 위해 $watch 속성으로 감시한다. => 데이터 관찰
- 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
- 변경 예정인 새 데이터에 접근할 수 있어 변경 예정인 데이터의 값과 관련된 로직을 미리 넣을 수 있다. (여기에 값을 변경하는 로직을 넣어도 화면이 다시 그려지지는 않는다.)
- updated
- 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계
- 데이터 변경으로 인한 화면 요소 변경까지 완료되었기 때문에 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다.
- 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있으므로 computed, watch와 같은 속성을 사용해서 값을 변경해야한다.
- beforeDestroy
- 뷰 인스턴스가 파괴도기 직전에 호출되는 단계
- 아직 인스턴스에 접근할 수 있으므로 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.
- destroyed
- 뷰 인스턴스가 파괴되고 나서 호출되는 단계
- 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위의 인스턴스도 파괴된다.
< 예제 >
<html>
<head>
<title>Vue Instance Lifecycle</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!'
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
mounted: function() {
console.log("mounted");
},
updated: function() {
console.log("updated");
}
});
</script>
</body>
</html>
위의 코드를 실행시킨 결과이다.
왜 updated함수는 호출되지 않았을까?
그 이유는 updated는 데이터 변경이 일어난 후 호출되는데, 위의 코드에서는 값이 변경되지 않아서 그런 것이다!
그렇다면 값을 변경해보자.
updated의 앞 단계인 mounted에서 값을 변경하였다.
mounted: function() {
console.log("mounted");
this.message = 'Data Change!'
},
그랬더니 아래와 같이 updated가 호출되었음을 확인할 수 있습니다.
'Frontend > Vue.js' 카테고리의 다른 글
| [Do it! Vue.js 입문] 화면을 개발하기 위한 필수 단위 - 뷰 컴포넌트 (0) | 2024.07.30 |
|---|---|
| [Do it! Vue.js 입문] Vue.js 소개 (0) | 2024.07.17 |
