다른 주요 프론트엔드 프레임워크(Angular, React)와 비교했을 때 뷰(Vue)의 가장 큰 강점은 바로 시작하기가 정말 쉽다는 점이다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 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>CDN으로 Vue.js 코드를 가져와 바로 Vue 인스턴스를 하나 생성하여 간단한 페이지를 생성해보았다. 기존의 구현된 시스템에 적용하기도 훨씬 수월할 것으로 보인다.
뷰 인스턴스(Vue Instance)
인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.
인스턴스 생성
인스턴스는 아래와 같이 생성할 수 있다.
new Vue();인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 바로 확인할 수 있다.
var vm = new Vue();
console.log(vm);
이처럼 인스턴스 안에서 미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용하여 빠르게 화면을 개발해나갈 수 있다.
따라서 순수 Javascript(Vanilla javascript)로 화면을 개발을 하는 것보다 Vue.js 프레임워크를 사용하면 훨씬 쉽고 빠르게 개발을 할 수 있다.
인스턴스 속성, API들
인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다.
- el: 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
- template: 화면을 표시할 요소 (HTML, CSS 등)
- data: 뷰의 반응성(Reactivity)이 반영된 데이터 속성
- methods: 화면의 동작과 이벤트 로직을 제어하는 메서드
- created: 뷰의 라이프 사이클과 관련된 속성
- watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
이외에도 mounted, updated, props 등 여러가지가 있지만 다음에 자세히 알려주는걸로 하고 넘어가겠다.
인스턴스 라이프 사이클
인스턴스 라이프 사이클이란 뷰의 인슽넌스가 생성되어 소멸되기까지 거치는 과정을 의미한다.
인스턴스가 생성되고 나면 라이브러리 내부적으로 다음과 같은 과정이 진행된다.
- data 속성의 초기화 및 관찰 (Reactivity 주입)
- 뷰 템플릿 코드 컴파일 (Virtual DOM -> DOM 변환)
- 인스턴스를 DOM에 부착
라이프 사이클 다이어그램
인스턴스의 라이프 사이클 흐름을 그림으로 나타내어 보면 다음과 같다.
라이프 사이클 훅
뷰의 라이프 사이클을 이해해야 하는 이유는 바로 라이프 사이클 훅 때문이다.
라이프 사이클 훅으로 인스턴스의 특정 시점에 원하는 로직을 구현할 수 있다.
예를 들어, 컴포넌트가 생성되자마자 데이터를 서버에서 받아오고 싶으면 created나 beforeMount 라이프 사이클 훅을 사용할 수 있다.
new Vue({
methods: {
fetchData() {
axios.get(url);
},
created: function() {
this.fetchData();
}
})인스턴스가 생성되자마자 Axios를 통해 HTTP GET 요청을 보내 데이터를 받는 코드이다.
뷰 프레임워크를 공부할 때 라이프 사이클은 매우 중요한 부분이니 이 글 외에도 자세히 알아보는걸 추천한다. (로직을 짤 때 라이프 사이클 훅은 무조건 필요함)
