안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 할아버지 방에서 손자 방으로 선물을 바로 쏘아 올리는 직송 마법(Provide & Inject)을 배웠죠? 오늘은 우리 성의 모든 마법사들이 공통으로 사용하는 마법 도구함을 만드는 법을 배울 거예요. 똑같은 주문을 여러 번 외우기 힘들 때, 미리 적어둔 쪽지를 주머니에서 슥 꺼내 쓰는 마법 도구 주머니, Composables(컴포저블)을 소개합니다!
1. Composables: 반복되는 마법을 하나로!
Composables는 ‘도라에몽의 4차원 주머니’와 같아요. 예를 들어, 웹사이트 여기저기서 ‘마우스 위치를 따라다니는 별가루’ 마법을 쓰고 싶다면, 방마다 똑같은 마법 코드를 적을 필요가 없어요.
별가루 마법을 주머니(함수)에 담아두고, 거실에서도 주방에서도 “주머니에서 별가루 꺼내줘!”라고 한 줄만 말하면 마법이 바로 시작된답니다. 코드가 깔끔해지고 실수가 줄어드는 마법 같은 정리법이죠!
2. 왜 이 마법이 필요한가요?
- 똑똑한 재사용: 한 번 잘 만들어둔 주머니는 다른 성(프로젝트)을 지을 때도 그대로 가져가서 쓸 수 있어요.
- 방이 넓어져요: 복잡한 주문들을 주머니에 넣으니, 각 방(컴포넌트)의 코드가 짧아지고 읽기 쉬워져요.
3. 실전 마법: 숫자를 세는 마법 주머니 만들기
어느 방에서나 숫자를 더하고 뺄 수 있는 공통 주머니를 만들어 볼까요? 보통 이름 앞에 ‘use’를 붙이는 게 약속이에요!
<!-- 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>
<button @click="add">마법의 숫자: {{ count }}</button>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘만능 공구함’에 비유해 보세요. 못을 박을 때마다 망치를 새로 만드는 게 아니라, 공구함에서 망치를 꺼내 쓰는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘남은 시간 계산하기’나 ‘랜덤 칭찬 메시지 뽑기’ 같은 기능을 컴포저블 주머니로 만들어 보세요. 아이가 “아! 이 코드는 저번에 만든 주머니에서 꺼내 쓰면 되겠네!”라고 말하는 순간, 아이의 프로그래밍 사고력은 한 단계 더 점프하게 됩니다.
마치며: 만능 마법 도구함을 가진 여러분
이제 여러분은 중복되는 코드를 없애고 마법 주문을 효율적으로 관리하는 정리 왕 마법사가 되었습니다! 다음 시간에는 **’마법 성의 전체 지도(Vue Router)’**라는 주제로, 여러 개의 방을 자유자재로 이동하며 여행하는 법을 배워볼게요! 내일 아침 9시에 만나요!
