create-adaptable-composable은(는) 무엇을 하나요?
라이브러리 수준의 Vue 컴포저블을 생성합니다. MaybeRef / MaybeRefOrGetter 타입의 입력을 받아 호출자가 일반 값, ref, 또는 getter를 전달할 수 있습니다. 입력을 toValue()/toRef()로 정규화한 후 반응성 효과(watch/watchEffect) 내부에서 사용하여 동작을 예측 가능하고 반응적으로 유지하세요. 사용자가 적응형 또는 재사용 가능한 컴포저블 생성을 요청할 때 이 스킬을 사용하세요.
특징
- 유연한 입력 타입 :
MaybeRef<T>,MaybeRefOrGetter<T>를 지원하여 호출자가 가장 편리한 형태로 값을 전달할 수 있습니다. - 안전한 정규화 :
toValue()또는toRef()를 사용하여 ref가 아닌 값도 일관되게 처리합니다. - 반응성 보장 :
watch()또는watchEffect()내부에서toValue()를 호출하여 모든 의존성을 추적하고 반응성을 유지합니다. - 라이브러리 수준 : Vue Use, VueUse 등 유명 라이브러리에서 사용하는 패턴을 따르며, 공개 API로 내보내기에 적합합니다.
사용 방법
기본 패턴
import { ref, toValue, watchEffect, type MaybeRefOrGetter } from 'vue'
export function useMyFeature(input: MaybeRefOrGetter<string>) {
const result = ref('')
watchEffect(() => {
const value = toValue(input)
result.value = `processed: ${value}`
})
return {
result: readonly(result),
}
}
호출 예시
// 일반 값
const { result } = useMyFeature('hello')
// ref
const name = ref('world')
const { result } = useMyFeature(name)
// getter
const { result } = useMyFeature(() => computeExpensiveValue())
주의 사항
toValue()는watchEffect또는watch내부에서만 호출해야 의존성 추적이 제대로 이루어집니다.- 읽기 전용 결과를 반환할 경우
readonly()로 래핑하는 것이 좋습니다. - 반환값이 여러 개인 경우 객체 구조 분해를 지원합니다.