computed()
: 계산된 속성을 정의하는 함수.
미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다.
computed를 적용하지 않을 경우
- 템플릿이 복잡히지며 todos에 따라 계산을 수행하게 된다.
- 이 계산을 템플릿에 여러 번 사용하는 경우에 반복이 발생한다.
<body>
<div id="app">
<h2>남은 할 일</h2>
<p>{{ todos.length > 0 ? "아직 남았다" : "퇴근!" }}</p>
</div>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const todos = ref([
{ text: "Vue 실습" },
{ text: "자격증 공부" },
{ text: "TIL 작성" },
{ text: "출결 체크" },
{ text: "1일 1알고" },
])
return {
todos,
}
},
})
app.mount("#app")
</script>
</body>
computed 적용
- 반응성 데이터를 포함하는 복잡한 로직의 경우 computed를 활용하여 미리 값을 계산
<body>
<div id="app">
<h2>남은 할 일</h2>
<p>{{ restOfTodos }}</p>
</div>
<script>
const { createApp, ref, computed } = Vue
const app = createApp({
setup() {
let id = 0
const todos = ref([
{ text: "Vue 실습" },
{ text: "자격증 공부" },
{ text: "TIL 작성" },
{ text: "출결 체크" },
{ text: "1일 1알고" },
])
const restOfTodos = computed(() => {
return todos.value.length > 0 ? '아직 남았다' : '퇴근!'
})
return {
todos, restOfTodos
}
},
})
app.mount("#app")
</script>
</body>
computed 특징
- 반환되는 값은 computed ref이며 일반 ref와 유사하게 계산된 결과를 .value로 참조할 수 있다. (템플릿에서는 .value 생략 가능)
- computed 속성은 의존된 반응형 데이터를 자동으로 추적한다.
- 의존하는 데이터가 변경될 때만 재평가
-> restOfTodos 계산은 todos에 의존하므로 todos가 변경될 때만 restOfTodos가 업데이트된다.
Computed vs Methods
computed 속성 대신 method로도 동일한 기능을 정의할 수 있다. 두 가지 접근 방식은 실제로 완전히 동일하다.
<body>
<div id="app">
<h2>남은 할 일</h2>
<p>{{ getRestOfTodos() }}</p>
</div>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
let id = 0
const todos = ref([
{ text: "Vue 실습" },
{ text: "자격증 공부" },
{ text: "TIL 작성" },
{ text: "출결 체크" },
{ text: "1일 1알고" },
])
const getRestOfTodos = function() {
return todos.value.length > 0 ? '아직 남았다' : '퇴근!'
}
return {
todos, getRestOfTodos
}
},
})
app.mount("#app")
</script>
</body>
computed와 method의 차이
- computed: 의존된 반응형 데이터를 기반으로 캐시(cached) 된다. 의존하는 데이터가 변경된 경우에만 재평가되고, 의존된 반응형 데이터가 변경되지 않는 한 이미 계산된 결과에 대한 여러 참조는 다시 평가할 필요 없이 이전에 계산된 결과를 즉시 반환한다.
- method: 다시 렌더링이 발생할 때마다 항상 함수를 실행한다.
Cache(캐시)란?
- 데이터나 결과를 임시적으로 저장해두는 임시 저장소
- 이후에 같은 데이터나 결과를 다시 계산하지 않고 빠르게 접근할 수 있도록 함
computed와 method의 적절한 사용처
- computed: 의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들 때 유용하다.
- method: 단순히 특정 동작을 수행하는 함수를 정의할 때 사용한다.
'Frontend > Vue3' 카테고리의 다른 글
| [Vue3] 리스트 렌더링 (v-for) (0) | 2024.05.06 |
|---|---|
| [Vue3] 조건부 렌더링 (v-if, v-show) (0) | 2024.05.06 |
| [Vue3] Form 입력 바인딩 (v-model) (0) | 2024.05.05 |
| [Vue3] 이벤트 핸들링 (v-on) (0) | 2024.05.05 |
| [Vue3] 동적 데이터 바인딩 (v-bind) (0) | 2024.05.04 |
