ES6 문법에 어느정도 익숙해졌다면, 이제 Vue에서 사용되는 몇 가지 기본적인 개념을 이해해야한다.
이에 앞서 먼저 내 컴퓨터에 Vue를 설치 해보자. vue 개발환경으로만 검색해도 무수히 많은 블로그들이 나올테니 찾아보면 되겠다.
보통, node를 설치하고 vue cli를 설치해서 vue cli를 이용하여 vue project를 생성 하면된다.
현재 vue3가 나왔지만 본 글은 vue2를 기준으로 설명한다. vue3에서는 vue2의 기본적인 개념을 거의 그대로 가져가고 vue3에서의 새로운 개념이 추가되었다고 보면된다.
상태(data)
이 부분이 기존에 웹어플리케이션 개발과 가장 다른 부분이 아닐까 한다. 상태라는 정보는 특정 화면에서만 가질 수도 있고, 전체 애플리케이션에서도 가질 수 있다. 상태정보는 일단 화면에서 쓰이는 데이터라고 볼 수 있겠다.
예들 들어 어떤 변수 text를 만들어서 문자열을 넣고 그것을 화면에 출력하고 싶다. 또한 변수의 문자열을 변경하여 출력하고 싶다. 이럴 경우 기존의 웹은 다음과 같이 해야할 것이다.
1
2
3
<div id="text"></div>
<button onClick="showText()">출력</button>
<button onClick="changeText('goob bye')">변경</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var text = "hello world";
/**
* 텍스트를 출력한다.
*/
function showText() {
var textEl = document.getElementById("text");
textEl.innerText = text;
}
/**
* 텍스트를 변경하고 출력한다.
* @param changeText 변경할 문자열
*/
function changeText(changeText) {
text = changeText;
showText();
}
vue에서는 text라는 변수를 하나의 상태로 본다. 그리고 다음과 같이 정의를 한다.
1
2
3
4
5
6
7
8
9
<script>
export default {
data() {
return {
text: "hello world",
};
},
};
</script>
그리고 화면에 출력하는 부분은 다음과 같다.
1
2
3
<template>
<div>{{ text }}</div>
</template>
전체 소스를 보면 다음과 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<div>{{ text }}</div>
<button v-on:click="changeText('goob bye')">변경</button>
</template>
<script>
export default {
data() {
return {
text: "hello world",
};
},
methods: {
/**
* 텍스트를 변경한다.
* @param changeText 변경할 문자열
*/
changeText(changeText) {
this.text = changeText;
},
},
};
</script>
비교를 해보면 문자열을 출력하는 함수인 showText()가 vue쪽 소스에선 빠졌다. 이전의 웹처럼 해당 element를 찾고 element의 property를 변경 할 필요가 없다. 그냥 text라는 데이터를 출력할 위치에 작성하기만 하면된다. 텍스트의 변경도 그렇다. 상태 정보만 변경하면 알아서 변경된 정보가 출력된다.
위 vue 소스를 보면
data,methods와 같이 export default의 속성으로 사전에 정의를 하게 되어있는데 이를 vue에선옵션이라고 부른다. vue2는 이런 구조로 명확하게 구분되어 있다보니 가독성도 좋아 보이는데 vue3에선composition api가 나오면서setup이라는 옵션을 사용하는데, 이 옵션에 data나 method들이 순서없이 정의를 할 수 있다보니 개발자가 가독성 있게 코딩을 해야한다. 물론 vue3에서도 data, methods 옵션을 그대로 사용 할 수는 있다.