계산 속성
계산 속성으로 캐시되는 반응형 값을 도출합니다.
계산 속성은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
계산 속성이란 무엇인가요
계산 속성은 다른 반응형 데이터에서 값을 도출합니다.
- 종속성이 변경될 때만 다시 계산됩니다
- 템플릿에서는 일반 속성처럼 읽힙니다
- 로직을 JS로 옮겨 템플릿을 깔끔하게 유지합니다
계산 속성 정의하기
구성 API에서는 계산 함수를 사용합니다.
import { ref, computed } from "vue"
const firstName = ref("Ada")
const lastName = ref("Lovelace")
const fullName = computed(() => {
return firstName.value + " " + lastName.value
})템플릿에서 계산 속성 사용하기
계산 속성은 괄호 없이 데이터 속성처럼 접근합니다.
<template>
<p>{{ fullName }}</p>
</template>
<!-- fullName updates automatically when
firstName or lastName change -->계산 속성과 메서드 비교
메서드도 값을 반환하는데, 계산 속성을 사용하는 이유는 무엇일까요?
- 계산 속성은 종속성을 기준으로 캐시됩니다
- 메서드는 렌더링 중 호출될 때마다 실행됩니다
반복해서 사용하는 파생 값에는 계산 속성이 더 효율적입니다.
캐싱이 작동하는 방식
계산 속성은 종속성이 변경될 때만 다시 실행됩니다. 여러 번 읽으면 캐시된 결과를 재사용합니다.
const expensive = computed(() => {
console.log("computing...")
return heavyCalculation(data.value)
})
// Reading expensive twice in one render
// logs "computing..." only once메서드는 매번 실행됩니다
반면 메서드는 입력이 변경되지 않았더라도 호출할 때마다 다시 계산합니다.
// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times
methods: {
getTotal() {
return this.price * this.qty
}
}옵션 API의 계산 속성
옵션 API에서는 계산 속성 블록에 계산 속성을 선언합니다.
export default {
data() {
return { price: 10, qty: 3 }
},
computed: {
total() {
return this.price * this.qty
}
}
}계산 속성의 값 가져오기 함수
기본적으로 계산 속성은 읽기 전용이며, 값을 가져오는 함수만 있습니다.
종속성이 변경될 때마다 값을 생성하기 위해 값을 가져오는 함수가 실행됩니다.
const doubled = computed(() => count.value * 2)
// You can read doubled.value
// but assigning to it would warn계산 속성의 값 설정 함수
값을 가져오는 함수와 설정하는 함수를 모두 제공하면 계산 속성을 쓸 수 있게 만들 수 있습니다.
const fullName = computed({
get() {
return first.value + " " + last.value
},
set(newValue) {
const parts = newValue.split(" ")
first.value = parts[0]
last.value = parts[1]
}
})값 설정 함수 사용하기
쓸 수 있는 계산 속성에 값을 할당하면 해당 설정 함수가 실행됩니다.
fullName.value = "Grace Hopper"
// The setter splits and assigns:
// first.value -> "Grace"
// last.value -> "Hopper"계산 속성을 사용하는 경우
반응형 상태에서 도출한 값이 필요할 때 계산 속성을 사용하세요.
- 목록 필터링 또는 정렬
- 표시할 데이터 서식 지정
- 여러 값을 하나로 결합
대신 부수 효과에 반응해야 한다면 감시자(다음 레슨)를 사용하세요.
빠른 확인
계산 속성에 대한 이해도를 확인해 보세요.
복습: 계산 속성
파생 상태에 대해 배웠습니다:
- 계산 속성은 반응형 데이터에서 값을 도출합니다
- 계산 속성은 캐시되며 종속성이 변경될 때만 다시 계산됩니다
- 메서드는 호출할 때마다 실행되지만 계산 속성은 그렇지 않습니다
- 계산 속성에는 값 가져오기 함수와 선택적인 값 설정 함수를 둘 수 있습니다
다음: 감시자와 깊은 반응성입니다.
자주 묻는 질문
“계산 속성” 강의는 무료인가요?
네 — “계산 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“계산 속성”에서 뭘 배우나요?
계산 속성으로 캐시되는 반응형 값을 도출합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.
“계산 속성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.