Vue 3 defineExpose를 React forwardRef와 useImperativeHandle로 컴파일하는 매핑 아키텍처

How does VuReact compile Vue 3's defineExpose() to React?

Ryan John2026년 5월 23일3분intermediate

AI 요약

Context

Vue 3의 기반 컴파일러 모델과 React의 컴포넌트 캡슐화 모델 간의 구조적 차이 존재. Vue의 defineExpose를 통한 내부 상태 노출 방식을 React 환경에서 동일하게 구현해야 하는 마이그레이션 제약 상황.

Vue의 defineExpose 매크로를 React의 forwardRef와 useImperativeHandle 조합으로 일대일 매핑하는 컴파일 전략 채택
자식 컴포넌트 내부의 상태와 메서드를 부모에게 노출하기 위해 useImperativeHandle을 통한 인터페이스 정의
Vue의 반응형 시스템을 모사하기 위해 @vureact/runtime-core의 useVRef를 도입하여 .value 접근 방식 유지
React의 렌더링 최적화를 위해 memo와 useCallback을 결합하여 불필요한 리렌더링 방지 구조 설계
부모 컴포넌트의 ref 접근 경로를 React의 ref.current 체계로 변환하여 Vue의 ref.value 참조 모델과 일치시킴

실천 포인트

1. 서로 다른 프레임워크 간 마이그레이션 시 API 표면적(Surface Area)을 일치시키기 위한 컴파일러 매핑 레이어 검토

2. React에서 자식 컴포넌트의 내부 API를 노출해야 할 때 forwardRef와 useImperativeHandle의 결합 패턴 활용

3. 프레임워크 전환 비용 최소화를 위해 기존 상태 접근 인터페이스(.value 등)를 런타임 래퍼로 유지하는 전략 고려

태그