VueJS - 계산된 속성: 초보자 가이드

안녕하세요, 미래의 Vue.js 슈퍼스타 여러분! 오늘 우리는 Vue.js의 계산된 속성(computed properties) 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 저는 여러분의 친절한 가이드가 되겠습니다. 단계별로 설명하겠습니다. 이 튜토리얼이 끝나면 여러분이 배운 것이 얼마나 많은지 놀라실 겁니다!

계산된 속성이란?

케이크를 만들어 보세요. 재료(data)가 있고, 레시피(logic)를 따라 맛있는 것(computed property)을 만듭니다. Vue.js에서 계산된 속성은 재료가 바뀔 때 자동으로 업데이트되는 마법의 케이크 레시피와 같습니다!

간단한 예제를 시작해 보겠습니다:

<template>
<div>
<p>First Name: {{ firstName }}</p>
<p>Last Name: {{ lastName }}</p>
<p>Full Name: {{ fullName }}</p>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>

이 예제에서 fullName은 우리의 계산된 속성입니다. firstName과 lastName을 결합하여 완전한 이름을 주는 지능형 레시피처럼 생각할 수 있습니다. 최고의 점? firstName이나 lastName이 바뀔 때 fullName이 자동으로 업데이트됩니다!

계산된 속성을 사용하는 이유

1. 간단성: 템플릿을 깨끗하고 읽기 쉽게 유지합니다.
2. 성능: Vue는 결과를 캐싱하고 의존성이 변경될 때만 다시 계산합니다.
3. 신뢰성: 의존성이 변경될 때 자동으로 업데이트됩니다.

계산된 속성 vs 메서드

"하지만 기다리세요," 여러분이 말할 수 있습니다. "메서드를 사용하는 것이 아니라면 안되나요?" 훌륭한 질문입니다! 비교해 보겠습니다:

<template>
<div>
<p>Computed: {{ reversedMessage }}</p>
<p>Method: {{ reverseMessage() }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>

reversedMessage와 reverseMessage()는 같은 작업을 수행합니다. 하지만 비밀이 있습니다: 계산된 속성은 캐싱됩니다. message가 변경되지 않는다면 reversedMessage는 다시 계산되지 않습니다. 마치 이전 결과를 기억하는 슈퍼 효율적인 어시스턴트처럼!

계산된 속성의 의존성

계산된 속성은 여러 개의 데이터에 의존할 때 빛을 발합니다. 더 복잡한 예제를 살펴보겠습니다:

<template>
<div>
<input v-model="searchQuery" placeholder="Search todos">
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
searchQuery: '',
todos: [
{ id: 1, text: 'Learn Vue', completed: false },
{ id: 2, text: 'Build an app', completed: true },
{ id: 3, text: 'Master computed properties', completed: false }
]
}
},
computed: {
filteredTodos() {
return this.todos.filter(todo =>
todo.text.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>

여기서 filteredTodos는 지능형 필터입니다. todos와 searchQuery를 모니터링하며, 둘 중 하나가 변경되면 자동으로 목록을 업데이트합니다. 마법이죠?

계산된 속성의 Get/Set

이제 레벨 업시키겠습니다! 계산된 속성은 getter와 setter를 모두 가질 수 있습니다. 읽고 수정할 수 있는 두 가지 레시피처럼 생각할 수 있습니다!

<template>
<div>
<p>Full Name: {{ fullName }}</p>
<button @click="changeFullName">Change Name</button>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
methods: {
changeFullName() {
this.fullName = 'Jane Smith'
}
}
}
</script>

이 예제에서 fullName은 단순한 레시피(getter)뿐만 아니라 역 레시피(setter)도 있습니다. fullName을 변경하면 자동으로 firstName과 lastName이 업데이트됩니다. 마법의 이름 변경 약제처럼!

계산된 속성 메서드

마지막으로, 계산된 속성 내에서 사용할 수 있는 일반 메서드 목록을 정리해 보겠습니다:

메서드	설명	예제
filter()	테스트를 통과하는 요소로 새로운 배열을 만듭니다	this.items.filter(item => item.price > 100)
map()	각 요소를 변환하여 새로운 배열을 만듭니다	this.items.map(item => item.name.toUpperCase())
reduce()	배열을 단일 값으로 줄입니다	this.items.reduce((total, item) => total + item.price, 0)
sort()	배열의 요소를 정렬합니다	this.items.sort((a, b) => a.price - b.price)
includes()	배열에 특정 요소가 있는지 확인합니다	this.items.includes('apple')
find()	테스트를 통과하는 첫 번째 요소를 반환합니다	this.items.find(item => item.id === 3)

이 메서드들은 원래 배열을 수정하지 않으며, 계산된 속성에 완벽하게 적합합니다!

그리고 여기서 끝입니다, 열심히 배우는 학습자 여러분! 지금 여러분은 Vue.js의 계산된 속성을 습득했습니다. 간단한 계산에서 복잡한 필터링까지, Vue 애플리케이션을 더 지능적이고 효율적으로 만들 수 있는 힘을 가지게 되었습니다. 계속 연습하고, 코딩하고, 가장 중요한 것은 Vue를 즐기세요!

Credits: Image by storyset