뷰 인스턴스의 정의와 속성
Vue 인스턴스는 Vue.js 애플리케이션의 핵심 단위로, 화면을 동적으로 관리하고, 데이터를 바인딩하거나 이벤트를 처리하는 데 필수적인 요소이다.
Vue 인스턴스를 생성하기 위해서는 new Vue() 생성자를 호출해야 하며, 이를 통해 Vue 애플리케이션이 동작하게 된다.
Vue 생성자
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
- new Vue()는 Vue 인스턴스를 생성하는 생성자 함수로, Vue.js 라이브러리를 로딩한 후 접근할 수 있습니다. 이 생성자를 통해 Vue 인스턴스는 특정 HTML 영역에 바인딩되어 해당 영역의 데이터를 제어할 수 있게 됩니다.
인스턴스 옵션 속성
Vue 인스턴스는 다양한 옵션 속성을 가집니다. 이 속성들은 인스턴스의 동작을 정의하고, 화면과 데이터의 상호작용 방식을 결정합니다. 주요 속성으로는 다음과 같습니다:
- el: Vue 인스턴스가 적용될 HTML 요소를 지정하는 속성으로, 해당 요소를 Vue가 제어하게 됩니다.
- data: Vue 인스턴스에서 사용할 데이터 객체를 정의합니다. 이 데이터는 HTML에서 {{ }} 문법을 통해 바인딩되어 화면에 표시됩니다.
- methods: 화면에서 호출할 수 있는 메서드를 정의합니다. 이벤트와 함께 사용됩니다.
- template: HTML 템플릿을 정의하는 속성으로, 템플릿을 직접 지정할 수 있습니다.
- computed: 데이터 변화를 감지해 계산된 결과를 반환하는 속성입니다.
Vue 인스턴스의 유효범위
Vue 인스턴스는 el 속성으로 정의된 HTML 요소와 그 하위 요소에서만 작동하며, 이를 인스턴스의 유효 범위라고 한다. 인스턴스의 유효 범위는 인스턴스가 관리할 수 있는 HTML 요소의 범위를 지정하는데, 해당 범위 내에서만 데이터 바인딩이나 이벤트 처리가 가능하다
<div id ="app">
{{message}}
</div>
위 HTML 구조에서 id="app"을 el 속성으로 지정했기 때문에, Vue 인스턴스는 #app 요소와 그 내부에서만 데이터 바인딩이 이루어집니다. 예를 들어 {{ message }}는 data 속성에서 정의된 message 값으로 대체된다.
Vue 인스턴스 라이프 사이클
Vue 인스턴스는 라이프사이클(lifecycle) 동안 여러 상태를 거치며, 이 과정에서 특정 훅(hook) 메서드들이 호출된다. Vue 인스턴스 라이프사이클은 크게 4단계로 나눌 수 있다.
- 생성 단계 (Creation):
- 인스턴스가 초기화되며, data와 같은 옵션 속성이 정의된다.
- beforeCreate, created 등의 라이프사이클 훅이 이 단계에서 실행
- DOM 부착 단계 (Mounting):
- 인스턴스가 DOM에 연결되며, 화면 요소와 상호작용이 가능해진다.
- beforeMount, mounted 훅이 이 단계에서 실행
- 갱신 단계 (Updating):
- 데이터가 변경되면, Vue는 DOM을 다시 렌더링하여 화면을 업데이트
- beforeUpdate, updated 훅이 이 단계에서 실행
- 소멸 단계 (Destruction):
- 인스턴스가 제거되며, 더 이상 화면 요소와 연결되지 않는다.
- 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>
결과
이 코드에서는 인스턴스의 각 라이프사이클 훅이 호출될 때마다 콘솔에 로그가 출력된다.. 예를 들어, 인스턴스가 생성되면 created가 호출되고, DOM에 연결되면 mounted가 호출된다.updated의 경우 인스턴스에서 데이터 변경이 일어나 화면이 다시 그려지는 경우 호출되므로 로그에 나오지 않았다.
결론
Vue 인스턴스는 Vue.js의 핵심이며, 화면과 데이터 간의 상호작용을 가능하게 해주는 중요한 요소이다. 인스턴스는 옵션 속성을 통해 다양한 기능을 제공하며, 유효 범위를 통해 지정된 DOM 요소를 관리한다. 또한, Vue 인스턴스는 라이프사이클 동안 특정 상태 변화에 따른 여러 훅 메서드를 제공하여 개발자가 필요한 시점에 특정 작업을 수행할 수 있도록 돕는다
Vue.js의 라이프사이클을 잘 이해하면, 애플리케이션의 성능 최적화 및 디버깅을 쉽게 할 수 있으며, 동적으로 데이터를 관리하는 애플리케이션을 보다 효율적으로 만들 수 있다.
'웹 개발 > Vue.js' 카테고리의 다른 글
| [Vue.js] 뷰 라우터 (0) | 2024.10.13 |
|---|---|
| [Vue.js] 컴포넌트 통신 (0) | 2024.10.12 |
| [Vue.js] 뷰 컴포넌트 (0) | 2024.10.12 |
| [Vue.js] Hello Vue.js 프로젝트 만들기 (0) | 2024.10.10 |
| [Vue.js] Vue.js란? (0) | 2024.10.10 |
