안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 마법 성에 이제 방도 많아지고 마법 도구도 엄청나게 늘어났어요! 그런데 도구가 너무 많아지니 어디에 뭐가 있는지 찾기가 힘들어졌죠? 오늘은 흩어진 마법 재료들을 용도별로 예쁜 주머니에 담아 정리하는 마법 주머니 정리술, Composition API(컴포지션 API) 고수 되기 편을 준비했습니다!
1. 왜 정리가 필요한가요?
처음엔 코드가 짧아서 괜찮았지만, 이제는 ‘날씨 마법’, ‘점수 마법’, ‘시간 마법’이 한데 뒤섞여 버렸어요. 마치 장난감 상자에 레고, 인형, 자동차가 한꺼번에 들어있는 것과 같죠.
Composition API를 사용하면 관련된 마법끼리(변수와 함수들) 따로따로 묶어서 관리할 수 있어요. 나중에 ‘날씨 마법’만 고치고 싶을 때, 날씨 주머니만 열면 되니 정말 편하답니다!
2. 마법의 참조: ref와 shallowRef
우리가 쓰는 ref는 아주 강력한 마법이지만, 때로는 너무 무거울 때가 있어요.
- ref (꼼꼼한 관찰자): 주머니 속의 아주 작은 알맹이까지 다 지켜보는 꼼꼼한 마법이에요.
- shallowRef (겉면 관찰자): 주머니의 겉모양만 지켜보는 가벼운 마법이죠. 복잡한 마법 도구를 쓸 때는 가끔 이렇게 가벼운 마법이 필요할 때가 있답니다.
3. 실전 마법: 주머니별로 코드 나누기
관련 있는 마법들을 끼리끼리 묶어서 정리해 볼까요?
<script setup>
import { ref } from 'vue';
// 💰 [주머니 1: 용돈 관리 마법]
const money = ref(1000);
const addMoney = () => money.value += 100;
// ⭐ [주머니 2: 칭찬 스티커 마법]
const stars = ref(0);
const getStar = () => stars.value++;
// 이렇게 주머니별로 모아두면 보기도 좋고 찾기도 쉬워요!
</script>
<template>
<div>
<h2>내 보물 주머니</h2>
<p>현재 용돈: {{ money }}원 <button @click="addMoney">심부름하기</button></p>
<p>받은 별점: {{ stars }}개 <button @click="getStar">칭찬받기</button></p>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘정리 정돈의 기쁨’을 코딩으로 가르쳐 주세요. 서랍장에 양말, 티셔츠, 바지를 따로 담는 것처럼 코드도 기능별로 나누면 나중에 다른 사람이 봐도(혹은 미래의 내가 봐도) 이해하기 쉽다는 걸요. 아이와 함께 ‘우리 집 규칙 주머니’를 만들어 보세요. 거실 규칙, 공부방 규칙을 따로 정리하는 코드를 짜보며 분류의 기초를 익힐 수 있습니다.
마치며: 깔끔한 코딩 장인이 된 여러분
이제 여러분의 코드는 전문가처럼 아주 깔끔해졌습니다! 아무리 성이 커져도 두렵지 않죠. 다음 시간에는 **’마법 가루 뿌리기(Directives 심화)’**라는 주제로, 내가 직접 만드는 나만의 특수 주문인 커스텀 디렉티브를 배워볼게요.
