Watcher와 심층 반응성
Watcher와 심층 감시로 데이터 변경에 반응합니다.
Watcher와 심층 반응성은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
감시자란 무엇인가
감시자는 데이터가 변경되면 그에 대응하여 함수를 실행합니다.
- 계산 속성과 달리 부수 효과를 처리하는 데 사용됩니다
- 데이터 가져오기, 기록하기, 저장소에 저장하기 등에 사용됩니다
- 특정 값이 변경될 때 대응합니다
감시 함수
감시 함수는 감시할 원본과 새 값 및 이전 값을 받는 콜백을 인수로 사용합니다.
import { ref, watch } from "vue"
const query = ref("")
watch(query, (newVal, oldVal) => {
console.log("changed from", oldVal, "to", newVal)
})실제 예제
검색 입력을 감시하여 값이 변경되면 프로그래밍 인터페이스 호출을 실행하는 예입니다.
const search = ref("")
watch(search, async (newQuery) => {
const results = await fetchResults(newQuery)
items.value = results
})즉시 실행 옵션
기본적으로 감시자는 변경될 때만 실행됩니다. 즉시 실행 옵션을 사용하면 바로 한 번 실행됩니다.
watch(userId, (id) => {
loadUser(id)
}, { immediate: true })
// Runs immediately with the current value,
// then again on every change깊은 감시 옵션
객체를 감시할 때 기본적으로는 참조가 변경될 경우에만 실행됩니다. 깊은 감시 옵션을 사용하면 중첩된 속성도 감시합니다.
const profile = reactive({ name: "Ada", address: { city: "London" } })
watch(profile, (val) => {
console.log("profile changed")
}, { deep: true })
// Fires even when profile.address.city changes중첩 객체 감시
깊은 감시를 사용하지 않으면 감시 중인 반응형 객체의 중첩 속성을 변경해도 콜백이 예상대로 실행되지 않을 수 있습니다. 깊은 감시를 사용하면 이를 보장할 수 있지만 처리량이 더 많아집니다.
- 중첩된 값을 실제로 추적해야 할 때만 깊은 감시를 사용하세요
- 큰 객체를 깊게 감시하면 비용이 많이 들 수 있습니다
게터 감시
특정 중첩 값을 감시하려면 원본으로 값을 가져오는 함수를 전달하세요.
watch(
() => profile.address.city,
(newCity) => {
console.log("city is now", newCity)
}
)여러 원본 감시
여러 값을 한 번에 감시하려면 원본을 담은 배열을 전달하세요.
watch([width, height], ([newW, newH], [oldW, oldH]) => {
console.log("size:", newW, "x", newH)
})watchEffect
watchEffect는 즉시 실행되며, 읽어 온 반응형 값 중 하나라도 변경될 때마다 다시 실행됩니다. 원본 목록을 명시적으로 지정할 필요가 없습니다.
import { watchEffect } from "vue"
watchEffect(() => {
console.log("count is", count.value)
})
// Runs now, and again whenever count changes감시와 watchEffect 비교
다음 기준으로 선택하세요.
- 감시: 원본을 명시적으로 지정하고, 이전 값과 새 값을 제공하며, 기본적으로 지연 실행됩니다
- watchEffect: 의존성을 자동으로 추적하고 즉시 실행되며, 이전 값을 제공하지 않습니다
이전 값이나 정밀한 제어가 필요하면 감시를 사용하고, 편리함이 중요하면 watchEffect를 사용하세요.
옵션 인터페이스의 감시자
옵션 인터페이스에서는 데이터 이름을 키로 사용하는 감시 블록에 감시자를 선언합니다.
export default {
data() {
return { question: "" }
},
watch: {
question(newVal, oldVal) {
this.getAnswer(newVal)
}
}
}빠른 확인
감시자에 대해 이해한 내용을 확인해 보세요.
다시 보기: 감시자와 깊은 반응성
부수 효과를 사용해 변경에 대응하는 방법을 배웠습니다.
- 감시는 원본을 관찰하고 새 값과 이전 값을 제공합니다
- 즉시 실행은 시작할 때 한 번 실행합니다
- 깊은 감시는 중첩 객체의 변경을 추적합니다
- watchEffect는 의존성을 자동으로 추적하고 즉시 실행됩니다
- 배열을 사용해 여러 원본을 감시할 수 있습니다
다음 주제는 Vue 라우터를 사용한 라우팅입니다.
자주 묻는 질문
“Watcher와 심층 반응성” 강의는 무료인가요?
네 — “Watcher와 심층 반응성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“Watcher와 심층 반응성”에서 뭘 배우나요?
Watcher와 심층 감시로 데이터 변경에 반응합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.
“Watcher와 심층 반응성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.