반응형 상태 로직을 use 함수로 추출합니다.
composable은 ref, computed, 생명주기 Hook을 조합해 재사용 가능한 상태와 동작을 반환합니다. UI 구조가 아니라 로직 계약을 공유합니다.
반환값을 ref로 유지하면 구조 분해해도 반응성이 유지됩니다.
호출마다 독립 상태가 생성되며 전역 공유가 목적이면 별도 store를 사용합니다.
composable 모듈 최상위에 상태를 두면 의도치 않게 모든 호출이 상태를 공유합니다.
로컬 프로젝트에서 확인해보세요step 인수를 추가하고 2씩 증가하는 카운터를 만드세요.
<script setup>
import { ref } from "vue";
function useCounter(initial = 0) {
const count = ref(initial);
const increase = () => count.value++;
const reset = () => (count.value = initial);
return { count, increase, reset };
}
const { count, increase, reset } = useCounter(5);
</script>
<template>
<main>
<h1>{{ count }}</h1>
<button @click="increase">증가</button><button @click="reset">초기화</button>
</main>
</template>