안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 방을 옮겨도 기억력을 유지해주는 킵 얼라이브(KeepAlive) 마법을 배웠죠? 성이 점점 커지다 보니, 여러 방에서 똑같은 마법 주문을 반복해서 써야 할 때가 많아졌어요. 매번 똑같은 긴 주문을 외우기 힘들겠죠? 오늘은 자주 쓰는 마법을 예쁜 주머니에 담아두고 꺼내 쓰는 마법 주문 주머니, Composables(컴포저블)를 소개합니다!
1. Composable: 나만의 마법 도구 세트
컴포저블은 만능 도구 상자나 ‘필통’과 같아요.
- 정리 정돈: 마우스의 위치를 알려주거나, 시간을 재는 복잡한 마법들을 따로 떼어내어 이름표를 붙여 보관해요.
- 빌려 쓰기: 공부방에서도, 놀이방에서도 이 주머니만 가져가면 똑같은 마법을 즉시 사용할 수 있답니다.
이 마법을 쓰면 방의 크기가 작아지고 깔끔해져서, 성 전체가 아주 정갈해 보여요!
2. 왜 이 마법이 필요한가요?
- 코드 다이어트: 똑같은 내용을 여러 번 쓸 필요가 없어서 주문서(코드)가 아주 얇아져요.
- 수리가 쉬워요: 마법 주머니 속의 주문 하나만 고치면, 그 주머니를 쓰는 모든 방의 마법이 한꺼번에 고쳐진답니다.
3. 실전 마법: ‘칭찬 도장 찍기’ 주머니 만들기
여러 방에서 공통으로 쓸 칭찬 도장 주머니를 만들어볼까요? 관습적으로 이름 앞에 `use`를 붙여요!
// 1. 마법 주머니 만들기 (composables/useSticker.js)
import { ref } from 'vue';
export function useSticker() {
const count = ref(0);
const addSticker = () => {
count.value++;
alert('참 잘했어요! 도장 쾅!');
};
// 주머니 밖에서 쓸 수 있게 내보내요
return { count, addSticker };
}
// 2. 실제 방에서 사용하기 (StudyRoom.vue)
<script setup>
import { useSticker } from '../composables/useSticker';
// 주머니에서 도장 마법을 꺼내와요!
const { count, addSticker } = useSticker();
</script>
<template>
<div>
<p>받은 도장: {{ count }}개</p>
<button @click="addSticker">공부 완료!</button>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘전용 레시피’나 ‘공구 벨트’에 비유해 보세요. 요리할 때마다 조리법을 새로 만들지 않고 미리 적어둔 레시피 카드를 꺼내 보는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘오늘의 날짜 보여주기’나 ‘사용자 이름 부르기’ 같은 기능을 컴포저블로 만들어보세요. 성 안의 어떤 방을 새로 만들더라도 아빠가 미리 만들어둔 마법 주머니만 꺼내면 아이가 원하는 기능을 뚝딱 넣을 수 있게 됩니다.
마치며: 깔끔한 정돈의 달인
이제 여러분은 복잡한 마법들을 질서 정연하게 정리하는 최고의 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법 성의 파수꾼(Custom Directives)’**이라는 주제로, 글자나 그림에 특별한 능력을 직접 부여하는 아주 세밀한 마법을 배워볼게요! 다음 평일 아침 9시에 만나요!
