안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 스스로 반응하는 마법 거울을 배웠죠? 성이 점점 커지다 보니, 여러 방에서 똑같은 마법을 써야 할 때가 많아졌어요. 매번 같은 주문을 외우기 힘들지 않나요? 오늘은 자주 쓰는 마법을 예쁜 상자에 담아두고 필요할 때마다 꺼내 쓰는 마법 도구 세트, Composables(컴포저블)을 배워볼게요!
1. Composables: 언제든 빌려 쓰는 마법 가방
Composables는 도라에몽의 4차원 주머니 같아요. 예를 들어 ‘현재 마우스 위치를 알아내는 마법’이나 ‘숫자를 세는 마법’은 거실에서도, 주방에서도 필요할 수 있죠.
이 마법을 별도의 가방(파일)에 잘 담아두면, 어떤 방에서든 “마법 가방 열려라!”라고 한 줄만 적으면 그 능력을 바로 사용할 수 있답니다. 코딩 고수들은 이렇게 마법을 잘 정리해서 재사용하는 능력이 아주 뛰어나요.
[Image showing Vue.js Composable pattern: extracting logic into useSomething functions]
2. 마법 가방의 이름 규칙: use…
마법사들 사이의 약속이에요. 재사용할 마법 가방의 이름 앞에는 항상 ‘use’를 붙인답니다. ‘사용하다’라는 뜻이죠. 예를 들어 마우스를 따라다니는 마법은 useMouse, 숫자를 세는 마법은 useCounter라고 이름을 지어줘요.
3. 실전 마법: 어디서든 쓸 수 있는 숫자 세기 가방
숫자를 올리고 내리는 마법 가방을 만들어서 가져와 볼까요?
// 1. 마법 가방 만들기 (useCounter.js)
import { ref } from 'vue';
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
// 가방 밖으로 꺼내줄 물건들을 정해요
return { count, increment };
}
// 2. 방 안에서 마법 가방 꺼내기 (App.vue)
<script setup>
import { useCounter } from './useCounter.js';
// 가방에서 필요한 주문만 쏙 꺼내요!
const { count, increment } = useCounter();
</script>
<template>
<div>
<p>가방에서 꺼낸 숫자: {{ count }}</p>
<button @click="increment">숫자 올리기</button>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘분리수거’나 ‘공구함’을 예로 들어 설명해 주세요. 망치가 필요할 때마다 새로 사는 게 아니라 공구함에서 꺼내 쓰는 것처럼, 코딩도 잘 정리해두면 나중에 다른 프로그램을 만들 때도 그대로 가져다 쓸 수 있다는 걸요. 아이와 함께 ‘우리 집 만능 규칙 가방’을 상상해 보세요. “이 가방만 있으면 어디서든 깨끗이 씻기 마법이 발동해!” 같은 이야기를 나누며 모듈화의 기초를 즐겁게 익힐 수 있습니다.
마치며: 마법 도구 제작자가 된 여러분
이제 여러분은 단순히 마법을 부리는 단계를 넘어, 다른 마법사들도 쓸 수 있는 멋진 마법 도구를 직접 만드는 제작자가 되었습니다! 정말 멋진 성장이죠? 다음 시간에는 **’마법의 포털(Vite와 빌드)’**이라는 주제로, 우리가 만든 마법 성을 전 세계 사람들이 볼 수 있게 포장해서 날려 보내는 비법을 배워볼게요! 내일 아침 9시에 만나요!
