composable은 Composition API를 사용해 상태 기반 로직을 캡슐화하는 재사용 가능한 함수입니다. 관례적으로 useXxx로 명명하며 반응형 상태와 함수를 반환합니다 — mixin이나 반복 없이 컴포넌트 간에 로직을 공유하게 해줍니다.
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // 각 호출 = 독립적인 상태
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
useCounter()를 호출하는 각 컴포넌트는 자체적으로 격리된 count를 얻습니다 — composable은 모듈 수준의 공유 변수와 달리 호출마다 새로운 상태를 생성합니다.
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // 설정
onUnmounted(() => window.removeEventListener("mousemove", update)); // 자동 정리!
return { x, y };
}
composable은 라이프사이클 훅, watcher, 다른 composable을 사용할 수 있으며, 결정적으로 자체 정리를 캡슐화(onUnmounted)하여 사용자가 그것을 기억할 필요가 없습니다.
mixin (Vue 2): 컴포넌트에 병합됨 — 속성의 출처가 불명확,
mixin 간 이름 충돌, 암묵적 의존성
composable: 명시적 import + 반환 값 — 명확한 출처, 충돌 없음,
조합 가능, TypeScript에서 완전한 타입 지정
composable은 Vue 3에서 상태 기반 로직을 추출하고 재사용하는 바로 그 관용적 방법입니다 — 데이터 페칭, 폼 처리, 마우스/스크롤 추적, 디바운싱 등.
Vue 2의 mixin이 실패한 로직 재사용 문제를 깔끔하게 해결합니다(명시적, 충돌 없음, 조합 가능, TypeScript 친화적).
팀이 Composition API를 채택하는 주된 이유입니다: 공유 로직이 흩어지거나 중복된 코드가 아니라 단순하고 테스트 가능한 함수가 됩니다.
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기