여러 컴포넌트에서 완전히 똑같은 기능(예: 마우스 커서 위치 추적, 다크 모드 토글, API 데이터 패칭)을 작성하고 있다면 어떨까요? Vue 3에서는 이 중복된 기능(상태+로직)을 싹둑 잘라내어 별도의 함수로 빼낼 수 있습니다. 이를 컴포저블(Composables)이라고 부르며, 관례적으로 use...() 라는 이름으로 시작합니다.
<script setup>
// [1. 불러오기] 내가 만든 useMouse 컴포저블을 한 줄로 쓱! 가져옵니다.
import { useMouse } from './composables/useMouse';
// [2. 사용하기] 이 컴포넌트 전용으로 독립적인 마우스 x, y 반응형 데이터를 얻어냅니다.
// 이렇게 한 줄만 쓰면, onMounted/onUnmounted 로직까지 알아서 다 챙겨줍니다!
const { x, y } = useMouse();
</script>
<template>
<div class="h-screen w-full flex items-center justify-center bg-slate-900">
<div class="text-center">
<h1 class="text-3xl font-bold text-teal-400 mb-4">현재 마우스 위치</h1>
<p class="text-4xl font-mono text-teal-300 bg-slate-800 p-4 rounded-xl shadow-lg border border-slate-700">
X: {{ x }} / Y: {{ y }}
</p>
</div>
</div>
</template>
