Vue.js 화면을 개발하기 위한 필수 단위 인스턴스
- 라이브러리/Vue.js
- 2019. 4. 7. 02:26
Vue 뷰로 웹을 개발할 때 반드시 알아야 하는 두 가지 기술 요소는 인스턴스와 컴포넌트이다. 그 중 인스턴스에 대해 알아보자.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'Hello Vue.js!'
}
});
</script>
</body>
</html>인스턴스는 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 다음의 코드를 보면 브라우저 창에 텍스트 형태로 'Hello Vue.js!'가 출력되는 것도 인스턴스가 있기 때문이다. 그렇다면 어떻게 생성하면 될까? 아래의 코드를 보면 생성자 인스턴스를 만들고 el 속성, data 속성 등을 이용해서 화면을 만든다.
<script>
<!--Vue 생성자 인스턴스 시작부분-->
new Vue({
el:'#app', <- el 속성
data:{ <- data 속성
message:'Hello Vue.js!'
}
});
</script>이렇게 생성자를 만드는 이유는 재정의하여 편리하게 사용하도록 하기 위해서이다. 생성자는 객체를 생성할 때 자주 사용하는 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 떄 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용한다.
인스턴스 유효 범위
인스턴스 유효 범위는 특정한 범위 안에서만 옵션 속성들이 적용되어 나타난다. 그 말은 위 코드를 보면 id값이 app인 경우에만 메세지를 출력된다. 따라서 유효 범위는 el 속성과 밀접한 관계가 있다.
인스턴스 라이프 사이클
인스턴스 속성 중 created는 인스턴스가 생성될 때 호출할 동작을 정의한다. 이뿐만 아니라 beforeCreate, beforeMount, mounted 등 이것을 라이프 사이클 속성이라고 부른다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직(개발자가 임의로 작성한 로직)을 라이프 사이클 훅이라고 부른다.
인스턴스를 생성하는 것이 있으면 소멸되는 것도 있을 것이다. 아래의 링크를 참고하여 라이프 사이클 단계를 이해하자.
