AI 요약관련 정보

• Vue 컴포저블에 props를 직접 전달하면 ref가 아니므로 반응성이 깨질 수 있습니다. 🚫
• 컴포저블이 일반 값, ref, 게터 함수 등 다양한 입력 타입을 유연하게 처리하고 반응성을 유지하도록 maybeRefOrGetter 타입과 toValue 헬퍼 함수를 사용해야 합니다. 🛠️
• 게터 함수가 필요한 이유는 Vue의 반응성 시스템이 이펙트(computed, watch 등) 내부에서 반응형 값을 읽을 때만 의존성을 추적하기 때문입니다. props.name을 직접 읽으면 이펙트 외부에서 발생하여 추적 관계가 설정되지 않습니다. 🕵️‍♀️
• 게터 함수(() => props.name)는 props.name 값의 읽기를 반응형 컨텍스트(이펙트 내부)로 지연시켜 Vue가 의존성을 올바르게 추적하고 반응성을 유지할 수 있게 합니다. ⏰
• watch 대상이나 컴포저블에서 props를 사용할 때는 항상 게터 함수를 사용하는 것이 좋으며, 이는 입력 값의 의도치 않은 변경을 방지하는 데도 도움이 됩니다. ✅
• defineProps의 구조 분해 할당은 컴파일러 매크로로, 내부적으로 props.myProp으로 변환되어 이펙트 외부에서 읽히므로 반응성을 잃을 수 있으며, 컴포저블에서는 오류 없이 조용히 실패할 수 있습니다. ⚠️
• Volar의 "props destructuring and inlay hints" 설정을 활성화하면 구조 분해 할당된 props 사용 시 props. 접두사를 시각적으로 표시하여 게터 함수가 필요한 시점을 명확히 알 수 있습니다. 💡