Vue.js 강좌 뷰 인스턴스 06
이전 강좌
2022.12.25 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 Html 요소의 속성 지정 v-bind 05
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 이전 강좌 2022.12.25 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 Vue.js 강좌
ecolumbus.tistory.com
Vue Instance 뷰 인스턴스
이번 포스팅은 코딩보다는 Vue 인스턴스에 대해 개념적인 부분을 공부해 본다.
인스턴스라는 말은 프로그램이 메모리에 올라가서 실행되는 것을 의미하는 정도로 이해하시기 바란다.
1~5 강좌까지 특별하게 언급하지 않았지만 이미 우리는 인스턴스를 생성해 왔다.
복습 및 개념을 차근차근 편하게 알아보자.
인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다.
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch: ,
});
Vue 인스턴스(객체)의 이름가 기능등이다.
당장 이해가 되지 않더라도 개념적인 부분을 숙지하고 있자.
강좌가 진행되면서 기능을 구현하다 보면 자연스럽게 깨닫게 된다.
- el : 인스턴스가 그려지는 하면의 시작점(특정 HTML 태그)
- template : 화면에 표시할 요소 (HTML, CSS 등) , 템플릿과 가상 DOM을 생성
- data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성.
- methods : 화면의 동작과 이벤트 로직을 제어하는 속성
- created : 뷰의 라이프 사이클, 생명주기라고 통상 표현한다.
- watch : 뷰-모델의 데이터를 감시한다. 이벤트 루프, 옵서버 패턴이 적용.
인스턴스 라이프 사이클
뷰의 라이프 사이클을 이해해야 하는 이유는 인스턴스의 특정 시점에 원하는 로직을 구현할 수 있기 때문이다.
예를 들어, 언제 서버에서 데이터를 받아올지, 유저가 버튼을 클릭 시 어떤 부분에 분기를 태워서 HTML을 컨트롤할지.
주로 사용하는 시점 4가지는 꼭 이해해야 한다.
- Creation(생성) 단계 : Vue 인스턴스가 실행된 후, 가장 처음 실행된다.
- Mounting(장착) 단계 : 템플릿과 렌더링 된 Html Dom에 접근할 수 있는 단계.
- Updating(수정) 단계 : 데이터가 변할고 재 렌더링이 일어난 후에 일어나는 단계
- Destrucion(소멸) 단계 : 소멸 후 호출된다.
생명주기 - Life Cycle
인스턴스의 상태에 따라서 호출할 수 있는 속성들, 즉 속성마다 개발자가 추가한 커스텀 로직을 Life Cycle Hook이라고 한다.
- beforeCreate
- created
- beforMount
- mounted
- beforeUpdate
- updated
- beforDestroy
- destroyed
생명주기 흐름 코드로 확인해 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
msg: '안녕하세요'
},
created: function () {
console.log('created');
},
beforeMount: function () {
console.log('beforeMount');
},
mounted: function () {
console.log('mounted');
},
updated: function () {
console.log('updated');
},
destroyed: function () {
console.log('destroyed');
},
})
}
</script>
</head>
<body>
<h2>Vue.js 강좌 뷰 인스턴스 06</h2>
<div id="app">
{{ msg }}
</div>
</body>
</html>
실행해서 콘솔을 확인해 본다.
'Web Front 개발공부 > Vue.js' 카테고리의 다른 글
Vue.js 강좌 심화 양방향 바인딩 v-model 08 (0) | 2022.12.27 |
---|---|
Vue.js 강좌 양방향 바인딩 v-model 07 (0) | 2022.12.27 |
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 (0) | 2022.12.25 |
Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 (2) | 2022.12.25 |
Vue.js 강좌 텍스트 바인딩, 데이터 표시 03 (2) | 2022.12.24 |
댓글