안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 배운 부드러운 변신 마법, 잘 연습해 보셨나요? 오늘은 우리 웹사이트에 아주 특별한 ‘감시자’를 한 명 세워둘 거예요. 바로 데이터가 바뀌는 걸 가만히 지켜보고 있다가, 특정한 일이 생기면 바로 움직이는 마법의 눈, Watcher(왓처)입니다!
1. Watcher: 데이터가 변하는 순간을 포착해요
우리가 배운 computed가 계산기라면, Watcher는 행동 대장이에요. 예를 들어, 마법 점수가 100점이 되는 순간 “축하합니다!”라는 알림창을 띄우거나, 입력창에 글자를 쓸 때마다 자동으로 번역을 해주는 것처럼 ‘어떤 값이 바뀔 때 특정한 행동’을 하고 싶을 때 사용해요.
마치 엄마가 거실에서 공부하는 우리를 지켜보시다가, 책 한 권을 다 읽는 순간 “간식 먹자!”라고 말씀하시는 것과 비슷하답니다.
2. 왜 그냥 함수를 쓰지 않고 Watcher를 쓰나요?
- 비동기 마법: 데이터를 서버에 보내서 결과를 기다려야 하는 것처럼 시간이 걸리는 마법을 부릴 때 아주 좋아요.
- 조용히 지켜보기: 우리가 일일이 명령하지 않아도, Watcher는 자기가 맡은 데이터만 뚫어져라 쳐다보고 있어서 실수가 없답니다.
3. 실전 마법: 점수가 오르면 칭찬해주는 마법사
점수가 바뀔 때마다 감시자가 어떤 반응을 하는지 코드로 살펴볼까요?
<div id="app">
<p>현재 마법 점수: {{ score }}점</p>
<button @click="score += 10">점수 올리기</button>
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
score: 0,
message: '공부를 시작해봐요!'
}
},
// [마법의 눈 장착!]
watch: {
// score라는 데이터가 바뀔 때마다 이 마법이 실행돼요
score(newScore, oldScore) {
console.log(`점수가 ${oldScore}에서 ${newScore}로 바뀌었네!`);
if (newScore >= 50) {
this.message = '우와! 벌써 50점이 넘었네요! 대단해요! ✨';
}
}
}
}).mount('#app');
</script>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들과 함께 score가 100점이 되었을 때 alert('마법사 자격증 획득!')이 뜨도록 고쳐보세요. 내가 노력해서 점수를 올렸을 때 프로그램이 나를 지켜보고 있다가 반응해주는 경험은 아이들에게 성취감을 주는 아주 좋은 방법입니다.
마치며: 더 똑똑해진 우리 웹사이트
오늘 배운 Watcher 덕분에 우리 웹사이트는 이제 상황에 맞춰 스스로 판단하고 행동할 수 있게 되었어요. 다음 시간에는 **’마법 도구 상자(Lifecycle Hooks)’**라는 주제로, 웹사이트가 태어나서 사라질 때까지의 과정을 관리하는 법을 배워볼게요.
