안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지금까지 우리는 아주 멋진 마법들을 많이 배웠어요. 그런데 마법 주문이 너무 많아지면 어떻게 될까요? 지팡이가 무거워지고 주문이 꼬일 수도 있겠죠? 오늘은 복잡한 마법 주문들을 종류별로 예쁘게 묶어서 관리하는 최신 마법, Composition API(컴포지션 API)를 배워볼게요!
1. Composition API: 마법 주문 정리함
예전에는 ‘데이터’, ‘함수’, ‘감시자’ 주문들을 정해진 칸에 따로따로 넣어야 했어요. 하지만 Composition API를 쓰면 관련된 것들끼리 한 묶음으로 정리할 수 있답니다.
예를 들어, ‘공격 마법’에 필요한 데이터와 함수를 한곳에 모으고, ‘방어 마법’에 필요한 것들을 다른 곳에 모으는 식이죠. 이렇게 하면 마법이 아무리 많아져도 헷갈리지 않고 금방 찾을 수 있어요!
2. 핵심 도구: setup과 ref
- setup(): 모든 마법 준비를 마치는 특별한 장소예요. 여기서 마법 지팡이를 강화하죠.
- ref(): 어떤 것이든 담을 수 있는 ‘마법 주머니’예요. 이 주머니에 숫자를 넣으면, 숫자가 바뀔 때마다 화면이 알아서 변신한답니다.
3. 실전 마법: 강화된 지팡이로 숫자 세기
새로운 방식으로 숫자를 올리는 마법을 부려볼까요? 코드가 훨씬 깔끔해진 걸 느껴보세요.
<div id="app">
<p>현재 마력: {{ power }}</p>
<button @click="charge">마력 충전!</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue;
createApp({
// [강화된 마법 지팡이 설정]
setup() {
const power = ref(10); // 마법 주머니에 10을 넣어요
const charge = () => {
power.value++; // 주머니 속 값을 1씩 올려요
};
// 밖에서 쓸 수 있게 마법들을 돌려줘요
return {
power, charge
}
}
}).mount('#app');
</script>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 이 개념을 ‘필통 정리’에 비유해 보세요. 연필, 지우개, 자를 아무렇게나 던져두는 게 아니라, 필통에 예쁘게 담아두면 공부할 때 훨씬 편한 것과 같다고요. 코딩도 정리 정돈을 잘하는 사람이 나중에 훨씬 크고 멋진 성을 지을 수 있다는 점을 강조해 주세요.
마치며: 진정한 현대 마법사의 길
오늘 배운 방식은 실제 프로 개발자들이 가장 많이 사용하는 강력한 기술이에요. 여러분은 벌써 전문가의 발걸음을 내디딘 셈이죠! 다음 시간에는 **’마법 도구 재사용하기(Composables)’**라는 주제로, 한 번 만든 마법을 여기저기서 빌려 쓰는 법을 배워볼게요.
