Vue 3 Reactive API의 React Hook 기반 런타임 매핑 설계

Context

Vue 3의 Proxy 기반 반응형 상태 관리 모델을 React 환경에서 유지하려는 요구 발생. 서로 다른 상태 업데이트 매커니즘으로 인해 Vue 코드의 React 이식 시 로직 재작성이 필요한 한계 존재.

Technical Solution

• Vue reactive()를 React 전용 런타임 어댑터인 useReactive() Hook으로 컴파일하여 객체 반응성 유지
• Proxy 기반의 속성 변경 감지 로직을 React의 렌더링 사이클과 동기화하는 런타임 레이어 설계
• TypeScript Generic 타입을 보존하는 컴파일 전략을 통한 정적 타입 안정성 유지
• shallowReactive()를 useShallowReactive()로 매핑하여 최상위 레벨의 참조 변경만 추적하는 최적화 구조 적용
• 딥 트래킹으로 인한 오버헤드 방지를 위해 데이터 성격에 따른 Selective Reactivity 적용