안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 마법 상자의 내용을 쏙쏙 갈아 끼우는 ‘마법의 포장지(Slots)’를 배웠죠? 이제 우리 성에는 수많은 마법 상자가 생겼어요. 그런데 여러 상자에서 ‘점수 계산하기’나 ‘현재 시간 보여주기’ 같은 똑같은 마법을 쓰고 싶다면 어떡해야 할까요? 오늘은 마법 지식을 따로 모아 필요할 때마다 빌려 쓰는 마법의 재료 섞기, Composables(컴포저블) 마법을 소개합니다!
[IMAGE_1]
1. Composables: 마법 도서관의 주문서
컴포저블은 성의 도서관에 보관된 ‘공통 마법 주문서’와 같아요.
- 한 번만 적기: 각 방마다 똑같은 요리법을 적어둘 필요 없이, 도서관에 요리법(함수)을 한 번만 적어두면 돼요.
- 언제든 빌려 쓰기: 거실에서도, 주방에서도 그 요리법이 필요하면 도서관에서 주문서를 빌려와서(Import) 바로 사용할 수 있답니다.
2. 왜 이 마법이 필요한가요?
- 똑똑한 중복 제거: 똑같은 코드를 여러 번 쓸 필요가 없어서 성의 용량이 가벼워지고 관리가 쉬워져요.
- 마법 합치기: ‘달리기 마법’과 ‘점프 마법’ 주문서를 따로 빌려와서 한 명의 용사에게 한꺼번에 걸어줄 수도 있답니다.
3. 실전 마법: 숫자를 세는 마법 지팡이
어디서든 쓸 수 있는 ‘숫자 세기’ 마법을 useCounter.js라는 주문서로 만들어볼까요?
// 1. useCounter.js (공통 마법 주문서)
import { ref } from 'vue';
export function useCounter() {
const count = ref(0);
const add = () => count.value++;
// 외부로 마법을 빌려줘요!
return { count, add };
}
// 2. 마법 상자에서 사용하기 (App.vue)
<script setup>
import { useCounter } from './useCounter.js';
// 도서관에서 마법을 빌려왔어요!
const { count, add } = useCounter();
</script>
<template>
<p>마법 사용 횟수: {{ count }}</p>
<button @click="add">마법 가루 뿌리기!</button>
</template>[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘공구함’이나 ‘백과사전’에 비유해 보세요. 망치가 필요할 때마다 망치를 새로 만드는 게 아니라, 창고에서 꺼내 쓰는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘시간 제한 타이머’ 기능을 컴포저블로 만들어 보세요. 수학 퀴즈방에서도, 영어 단어방에서도 똑같은 타이머 주문서를 빌려와서 쓸 수 있다는 걸 보여주면, 아이는 코딩의 ‘재사용성’이라는 핵심 가치를 완벽히 이해하게 됩니다.
마치며: 지혜를 나누는 위대한 마법사
이제 여러분은 지식을 한곳에 모으고 필요할 때마다 지혜롭게 꺼내 쓰는 성숙한 마법사가 되었습니다! 정말 멋진 성장이네요. 다음 시간에는 **’마법의 변신술(Dynamic Components)’**이라는 주제로, 하나의 상자가 상황에 따라 완전히 다른 상자로 변신하는 고급 변신 마법을 배워볼게요! 내일 아침 9시에 만나요!