안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 기분에 따라 옷을 갈아입는 변신술을 배웠죠? 오늘은 우리 웹사이트를 더 똑똑하게 만들어줄 두 가지 마법 도구를 소개할게요. 복잡한 계산을 순식간에 끝내는 마법의 돋보기(Computed)와 데이터가 바뀔 때까지 지켜보는 마법의 감시카메라(Watcher)예요!
1. Computed: 미리 계산해두는 척척박사 돋보기
Computed(컴퓨티드)는 아주 똑똑한 돋보기예요. 예를 들어, 우리가 가진 사탕 개수와 초콜릿 개수를 합쳐서 ‘전체 간식 개수’를 보여줘야 한다면, 숫자가 바뀔 때마다 우리가 직접 더하기를 할 필요가 없어요.
이 돋보기를 갖다 대기만 하면, 사탕이나 초콜릿 개수가 바뀔 때마다 자동으로 합계를 계산해서 보여준답니다. 게다가 아주 영리해서, 숫자가 바뀌지 않으면 예전에 계산했던 답을 그대로 기억하고 있어요!
2. Watch: 변화를 놓치지 않는 감시카메라
Watch(워치)는 조금 달라요. 이건 무언가 바뀔 때까지 뚫어지게 지켜보는 감시카메라와 같아요.
“사탕 개수가 10개가 넘으면 ‘그만 먹어!’라고 소리쳐줘!”처럼, 어떤 데이터가 변하는 순간에 특별한 행동(알림 띄우기, 소리 내기 등)을 하고 싶을 때 사용한답니다.
3. 실전 마법: 간식 개수 세기와 경고 알람
자동으로 합계를 내고, 너무 많이 먹으면 경고해주는 코드를 짜볼까요?
<script setup>
import { ref, computed, watch } from 'vue';
const candy = ref(0);
const chocolate = ref(0);
// 1. 척척박사 돋보기: 합계를 자동으로 계산해요
const totalSnacks = computed(() => {
return candy.value + chocolate.value;
});
// 2. 감시카메라: 합계가 10개가 넘는지 지켜봐요
watch(totalSnacks, (newValue) => {
if (newValue > 10) {
alert('앗! 간식을 너무 많이 먹으면 배가 아파요! 🤢');
}
});
</script>
<template>
<div>
<p>사탕: {{ candy }}개 <button @click="candy++">+</button></p>
<p>초콜릿: {{ chocolate }}개 <button @click="chocolate++">+</button></p>
<h2>총 간식 개수: {{ totalSnacks }}</h2>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘자동화’의 편리함을 알려주세요. 우리가 일일이 계산하지 않아도 컴퓨터가 알아서 결과를 내주는 것이 얼마나 편한지 경험하게 하는 거예요. 아이와 함께 ‘우리 집 용돈 계산기’를 만들어 보세요. 받은 용돈과 쓴 용돈을 넣으면 현재 남은 돈을 Computed가 보여주고, 남은 돈이 0원이 되면 Watch가 ‘절약하세요!’라고 말하게 하는 거죠. 경제 관념과 코딩 실력을 동시에 키울 수 있습니다.
마치며: 생각하는 웹사이트를 만든 여러분
이제 여러분의 웹사이트는 스스로 상황을 판단하고 계산까지 할 수 있게 되었습니다! 다음 시간에는 **’마법의 정리 정돈(Composition API & Refs)’**이라는 주제로, 복잡해진 마법 코드들을 깔끔하게 정리하는 고수의 비법을 배워볼게요.
