안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 성을 지키는 방패 마법을 배웠죠? 오늘은 우리 성에 아주 신비로운 마법 거울을 하나 놓아둘 거예요. 무언가 변할 때마다 우리가 일일이 알려주지 않아도, 거울이 스스로 상황을 보고 알아서 마법을 부리는 watchEffect(와치이펙트) 마법입니다!
1. watchEffect: 눈치 빠른 꼬마 마법사
우리가 전에 배웠던 watch 마법은 “사탕 개수를 지켜봐!”라고 하나하나 짚어줘야 했어요. 하지만 watchEffect는 훨씬 눈치가 빨라요.
마법 주문 안에 사탕, 초콜릿, 쿠키 이름을 넣기만 하면, 거울이 그 내용들을 쓱 보고는 그중 하나라도 바뀌는 순간 “앗! 뭔가 변했네?” 하고 즉시 마법을 발동한답니다. 우리가 어떤 데이터를 지켜보라고 말해주지 않아도 스스로 찾아내는 아주 기특한 마법이죠.
2. watch와 watchEffect, 어떻게 다를까요?
- watch (지정 감시): “이 물건이 바뀔 때만 나한테 알려줘!” (정확한 대상을 정함)
- watchEffect (자동 감시): “이 주문 안에 있는 재료들이 바뀌면 알아서 행동할게!” (주문 속 데이터를 스스로 감시)
3. 실전 마법: 점수가 바뀌면 자동으로 저장하는 거울
우리가 점수를 올릴 때마다 알아서 마법 창고(LocalStorage)에 기록해두는 코드를 짜볼까요?
<script setup>
import { ref, watchEffect } from 'vue';
const gold = ref(0);
const silver = ref(0);
// watchEffect는 처음 한 번 바로 실행되고,
// 안에 들어있는 gold나 silver가 바뀔 때마다 다시 실행돼요!
watchEffect(() => {
console.log(`현재 금화는 ${gold.value}개, 은화는 ${silver.value}개군요!`);
localStorage.setItem('my-wallet', gold.value + silver.value);
// 우리가 어떤 데이터를 감시할지 말 안 해도 스스로 gold와 silver를 지켜봐요!
});
</script>
<template>
<div>
<button @click="gold++">금화 줍기</button>
<button @click="silver++">은화 줍기</button>
<p>보관된 총 보물 점수: {{ gold + silver }}</p>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘센서등’을 예로 들어 설명해 주세요. 우리가 스위치를 켜지 않아도 사람이 지나가면 센서가 알아서 감지해 불을 켜주는 것처럼, 코딩에서도 데이터의 변화를 스스로 감지하는 기술이 아주 중요하다는 걸요. 아이와 함께 ‘자동으로 배경색이 바뀌는 마법 거울’을 상상해 보고, 어떤 상황(슬플 때, 기쁠 때)에 거울이 어떻게 반응하면 좋을지 이야기 나누며 센스 있는 개발자의 마음을 키워주세요.
마치며: 눈치백단 마법사가 된 여러분
이제 여러분은 일일이 명령하지 않아도 성 안의 변화를 스스로 감지하고 반응하는 똑똑한 시스템을 구축했습니다! 정말 대단한 실력이에요. 다음 시간에는 **’마법의 재활용(Composables)’**이라는 주제로, 자주 쓰는 마법들을 따로 모아 언제든 꺼내 쓰는 진짜 고수의 정리법을 배워볼게요.
