Vue.js 간단정리 #7 Computed Properties
Intro
https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.
Computed Properties란?
컴퓨티드 프로퍼티란 내부 데이터를 미리 연산한 뒤에 그 값을 갖고 있는 것을 말한다.
이전에 Vue 객체의 method 내부 함수는 실시간으로 data 를 조정했다.
computed는 조정된 값의 배합으로 무언가를 만들어야 할 때, 그것을 미리 만들어 놓는 것이다.
이를테면, 글씨 색에 따라 글자가 변하는 프로그램이 있다고 생각해보자.
기본적인 형태로 작성해보자면 아래와 같다...
<!DOCTYPE html>
<html lang="en">
<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>TEST!!</title>
</head>
<body>
<div id="app">
<div :style="{color:color}">글씨가 현재 {{color}}색입니다.</div>
<div v-for="color in colors" @mouseover="changeFontColor(color)">
여기에 마우스를 올리면 글씨가 {{color}}색이 됩니다.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
colors: ['red', 'blue', 'green'],
color: 'red',
},
methods: {
changeFontColor(color) {
this.color = color;
},
},
});
</script>
</body>
</html>이 html을 실행시켜보면 마우스를 올릴 때마다 글씨색이 바뀌는 프로그램이 나온다.
그런데, 'red색', 'blue색', 'green색' 등은 어색하므로 모두 한국어로 '빨간색', '파란색', '초록색'등으로 바꾸고 싶다고 생각했다면 어떻게 변경하겠는가?
computed를 쓰지 않고 바꾼다면 다음과 같은 소스가 나올 수 있을 것이다.
<!DOCTYPE html>
<html lang="en">
<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>TEST!!</title>
</head>
<body>
<div id="app">
<div :style="{color:color}">글씨가 현재 {{colorsKorean[colors.indexOf(color)]}}입니다.</div>
<div v-for="(color, index) in colors" @mouseover="changeFontColor(color)">
여기에 마우스를 올리면 글씨가 {{colorsKorean[index]}}이 됩니다.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
colors: ['red', 'blue', 'green'],
colorsKorean: ['빨간색', '파란색', '초록색'],
color: 'red',
},
methods: {
changeFontColor(color) {
this.color = color;
},
},
});
</script>
</body>
</html>여기서 유의할 점은 매번 index를 이용하여 어떤 색인지 연산하는 코드가 중간에 끼는 것인데, 이렇게 되면 나중에 내가 왜 저렇게 연산했는지 알아보기 힘들 수 있다.
하지만 computed를 쓰면 저 연산들을 computed에 몰아넣을 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>TEST!!</title>
</head>
<body>
<div id="app">
<div :style="{color:color}">글씨가 현재 {{computedKoreanColorName}}입니다.</div>
<div v-for="(color, index) in colors" @mouseover="changeFontColor(color)">
여기에 마우스를 올리면 글씨가 {{colorsKorean[index]}}이 됩니다.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
colors: ['red', 'blue', 'green'],
colorsKorean: ['빨간색', '파란색', '초록색'],
color: 'red',
},
methods: {
changeFontColor(color) {
this.color = color;
},
},
computed: {
computedKoreanColorName() {
return this.colorsKorean[this.colors.indexOf(this.color)];
},
},
});
</script>
</body>
</html>추후에 알아보기 쉽고 유지보수가 쉬운 코드를 만들기 위해서는 Computed를 적극 활용하는 편이 좋다.
만일, Argument가 넘어가야 하는 경우에는
computed: {
foo() {
return (bar) => {
return bar;
};
}
}위와 같이 작성할 수 있다.
공식문서 링크를 참조하면 왜 써야하고 언제 쓰는지에 대해 알 수 있다.
