Composable 해부: 재사용 로직

const{createApp,ref,onMounted,onUnmounted}=Vue;
function useTimer(){
  const time=ref(new Date().toLocaleTimeString());
  let interval;
  onMounted(()=>interval=setInterval(()=>time.value=new Date().toLocaleTimeString(),1000));
  onUnmounted(()=>clearInterval(interval));
  return{time};
}
function useCounter(initial=0){
  const count=ref(initial);
  const inc=()=>count.value++;
  const dec=()=>count.value--;
  const reset=()=>count.value=initial;
  return{count,inc,dec,reset};
}
createApp({
  setup(){
    const{time}=useTimer();
    const{count,inc,dec,reset}=useCounter(0);
    return{time,count,inc,dec,reset};
  },
  template:`<div>
    <div style='color:#f59e0b;font-size:13px;margin-bottom:8px;'>⏱ {{time}}</div>
    <div style='font-size:24px;color:#10b981;margin-bottom:8px;'>{{count}}</div>
    <div style='display:flex;gap:6px;'>
      <button @click='inc' style='background:#22c55e;color:#080808;border:none;padding:6px 12px;cursor:pointer;font-size:11px;'>+</button>
      <button @click='dec' style='background:#10b981;color:#080808;border:none;padding:6px 12px;cursor:pointer;font-size:11px;'>-</button>
      <button @click='reset' style='background:#333;color:#888;border:none;padding:6px 12px;cursor:pointer;font-size:11px;'>RESET</button>
    </div>
  </div>`
}).mount('#comp2-out');