간단한 화면부터 복잡한 화면까지, 멋진 화면을 만들기 위해서는 UI를 생각해 봐야합니다. 이를 설계라고 하는데, 인스턴스와 컴포넌트가 있어야 합니다. 이 두가지에 대해서 알아보도록 하겠습니다.
인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다.
뷰 인스턴스
뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위입니다. 인스턴스의 생성은 아래와 같은 형식으로 생성을 합니다.
new Vue({
...
});
위에서 new Vue() 로 인스턴스를 생성할 때 Vue를 생성자라고 합니다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있습니다. 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서 입니다.
- 옵션
옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다.
- el : 뷰로 만든 화면이 그려지는 시작점을 의미, 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 한다.
- template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
- methods : 화면 로직 제어와 관계된 메서드를 정의하는 속성
- created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
- 유효 범위
뷰 인스터스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타납니다.이것을 유효 범위라고 합니다. 인스턴스의 유효범위는 el 속성과 밀접한 관계가 있습니다. 아래는 new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정입니다.
뷰 라이브러리 파일 로딩 → 인스턴스 객체 생성 → 특정 화면 요소에 인스턴스를 붙임 → 인스턴스 내용이 화면 요소로 변관 → 변환된 화면 요소를 사용자가 최종확인
인스턴스의 유효 범위를 확인하기 위해서는 아래와 같이 유효 범위를 벗어나게 코딩을 해 보면 됩니다.
<div id='app'>
</div>
{{ message }}인스턴스의 유효 범위는 el 속성으로 지정한 <div id='app'> 태그 아래 요소입니다. 위의 코드와 같이 {{ message }}가 유효범위 밖에 있으면 뷰에서 인식하지 못하기 때문에 화면에는 {{ message }} 그대로 출력됩니다.
- 라이프 사이클
인스턴스의 상태에 따라 호출할 수 있는 속성이 있습니다. 이것을 라이프 사이클 속성이라고 합니다. 그리고 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 합니다. (옵션 부분에서 살펴본 created 와 같은 속성) 라이프 사이클 속성에는 총 8개가 있습니다.
라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어 집니다. 각 단계 사이에 라이프 사이클 속성 created, mounted, updated 등이 실행됩니다.
- beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계, data 속성과 method 속성이 아직 인스턴스에 정의되어 있지 않음. 화면 요소에도 접근 불가
- created : beforeCreate 라이프 사이클 단계 다음에 실행되는 단계, data 속성과 method 속성에 정의된 값에 접근하여 로직을 실행할 수 있지만, 아직 인스턴스가 화면 요소에 부착되지 전이기 때문에 template 속성에 정의된 돔 요소로 접근 불가, 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음.
- beforeMount : created 단계 이후 template 속서에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 단계, render()함수가 호출되기 직전의 로직을 추가하기 좋음
- mounted : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계, 화면 요서에 접근이 가능하여 제어를 하는 로직을 수행하기 좋음.
- beforeUpdate : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됨. 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시함. 이를 데이터 관찰이라함. 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음.
- updated : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계
- beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계, 아직 인스턴스에 접근 가능, 뷰 인스턴스의 데이터를 삭제하기 좋은 단계
- destoryed : 뷰 인스턴스가 파괴되고 나서 후출되는 단계, 뷰 인스턴스에서 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됨
아래의 예제 코드를 통하여 라이프 사이클에 대하여 알아봅시다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue Instance Lifecycle</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!'
},
beforeCreate : function(){
console.log("beforeCreate");
},
created:function(){
console.log("created");
},
mounted:function(){
console.log("mounted");
this.message = "Hello typiler!"
},
updated:function(){
console.log("updated");
}
});
</script>
</body>
</html>
위 코드를 실행한 결과는 아래와 같습니다.
개발자 도구의 Console 을 보면 뷰 라이프 사이클의 흐름대로 beforeCreate, created, mounted, updated 가 표시되는 것을 확인할 수 있습니다. updated는 mounted 에서 this.message 의 값을 변경하여 데이터 변경이 일어나 화면이 다시 그려지며 호출이 됩니다.