Vue v-on 지시어를 React Event System으로 변환하는 컴파일러 전략 설계

How does VuReact implement Vue v-on in React

Ryan John2026년 5월 27일4분intermediate

AI 요약

Context

Vue에서 React로의 마이그레이션 과정에서 발생하는 구문 체계의 근본적 차이 해결 필요. 특히 Vue 특유의 지시어 기반 이벤트 바인딩과 Modifier 시스템을 React의 JSX 속성 구조로 정밀하게 매핑하는 컴파일러 체인 설계가 핵심 과제임.

Technical Solution

Event Attribute Mapping: @click 등 Vue 지시어를 onClick 등 React 표준 camelCase 속성으로 1:1 변환하는 정적 컴파일 전략 채택
Runtime Modifier Processing: .stop, .prevent 등 복잡한 Modifier 조합을 dir.on() 헬퍼 함수를 통한 런타임 래퍼 함수 생성 방식으로 처리
Expression-to-Arrow Function: 템플릿 내 인라인 표현식을 JSX 화살표 함수로 변환하고 Vue의 $event를 React Event 객체로 자동 매핑
Component Communication Bridge: kebab-case 기반의 custom-event를 camelCase Props 콜백으로 변환하고 Optional Chaining을 통한 런타임 안정성 확보
Reactive State Access: Vue Ref/Computed 변수의 .value 접근 로직을 컴파일 단계에서 자동 처리하는 최적화 적용

실천 포인트

- 서로 다른 프레임워크 간 문법 변환 시 정적 매핑과 런타임 헬퍼 함수의 역할 분리 검토 - Custom Event 변환 시 Props 콜백으로의 치환 및 Optional Chaining 적용을 통한 타입 안정성 확보 - 복잡한 지시어(Modifier) 처리 시 컴파일 시점의 정적 분석보다 런타임 래퍼 함수를 통한 유연한 대응 전략 고려

태그

#Vue #React #Compiler #Event-Driven #AST

원문 읽기