0Pricing
Vue Academy · 강의

Composition API의 Computed와 Watch

파생 상태를 위한 computed(), 부수 효과를 위한 watch()와 watchEffect()를 다룹니다.

Composition API의 Computed와 Watch은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

상태에서 값을 도출하고 변화에 반응하기

반응형 상태는 이야기의 절반에 불과합니다. 상태에서 새로운 값을 도출하고 변화에 반응해야 합니다. 컴포지션 API는 이를 위해 computed, watch, watchEffect를 제공합니다.

파생 값에는 computed 사용하기

computed()는 값을 가져오는 함수를 받아 다른 반응형 상태에서 파생된 값을 가진 ref를 반환합니다. JS에서는 .value로 접근하고, 템플릿에서는 래핑이 해제된 상태로 사용합니다.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed는 지연 실행되고 결과를 캐시합니다

computed는 반응형 종속성 중 하나가 변경될 때만 다시 계산합니다. 변경 없이 열 번 읽으면 값을 가져오는 함수는 한 번만 실행되고 캐시된 결과가 재사용됩니다.

따라서 computed는 계산 비용이 큰 파생 값에 적합합니다.

computed는 자동으로 업데이트됩니다

종속성을 변경하면 computed는 다음에 읽을 때 업데이트됩니다. 직접 호출할 필요가 없습니다.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

부수 효과에는 watch 사용하기

watch()는 반응형 원본을 관찰하고 값이 변경되면 콜백을 실행합니다. 콜백은 새 값과 이전 값을 받습니다.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch는 기본적으로 지연 실행됩니다

computed와 달리 watch는 콜백을 즉시 실행하지 않습니다. 처음 변경될 때까지 기다립니다. 부수 효과에 사용하십시오. 예를 들면 로그 기록, 데이터 가져오기, 저장소에 저장하기 등이 있습니다.

여러 원본 관찰하기

여러 값을 한 번에 관찰하려면 원본을 배열로 전달하십시오. 콜백은 새 값과 이전 값의 배열을 받습니다.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

가져오기 함수 관찰하기

반응형 객체의 속성을 관찰하려면 값을 가져오는 함수를 전달하십시오. 객체를 직접 관찰하면 깊은 변경이 있을 때만 실행되므로 예상과 다를 수 있습니다.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: 즉시 실행과 자동 추적

watchEffect()는 함수를 즉시 실행하고, 함수 안에서 사용한 반응형 값이 변경될 때마다 다시 실행합니다. 종속성을 직접 나열하지 않아도 자동으로 추적됩니다.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch와 watchEffect 비교

  • watch: 원본을 명시하고, 지연 실행되며, 이전 값과 새 값을 제공합니다.
  • watchEffect: 종속성을 자동으로 추적하고, 즉시 실행되며, 이전 값에 접근할 수 없습니다.

이전 값이 필요하거나 실행을 세밀하게 제어하려면 watch를 사용하십시오. 간단한 반응형 부수 효과에는 watchEffect를 사용하십시오.

computed와 watch 비교

새로운 파생 값이 필요할 때는 computed를 사용하십시오. 변경에 반응하여 작업을 수행하려면 watch 또는 watchEffect를 사용하십시오. 값을 다시 계산하는 데 watch를 사용하지 마십시오. 그런 용도에는 computed가 적합합니다.

빠른 확인

알맞은 반응형 도우미를 선택하십시오.

복습

이제 값을 파생하고 변경에 반응하는 방법을 알게 되었습니다.

  • computed는 지연 계산되고 캐시되는 파생 값을 만듭니다.
  • watch는 특정 소스에 반응하고 새 값과 이전 값을 제공합니다. 지연 실행됩니다.
  • watchEffect는 즉시 실행되며 종속성을 자동으로 추적합니다.
  • 값에는 computed를, 부수 효과에는 watch/watchEffect를 사용하십시오.

자주 묻는 질문

“Composition API의 Computed와 Watch” 강의는 무료인가요?

네 — “Composition API의 Computed와 Watch” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Composition API의 Computed와 Watch”에서 뭘 배우나요?

파생 상태를 위한 computed(), 부수 효과를 위한 watch()와 watchEffect()를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Composition API의 Computed와 Watch” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Composition API를 사용하는 이유
  2. setup() 함수와 반응형 변수
  3. ref와 reactive: 각각 언제 사용할까요
  4. Composition API의 Computed와 Watch
← Vue Academy(으)로 돌아가기