Vue 3 화살표 함수를 React useCallback으로 자동 변환하는 컴파일 최적화

Context

Vue 3의 내 Top-level 화살표 함수를 React로 마이그레이션 시 발생하는 렌더링 성능 저하 문제. React의 함수 컴포넌트 특성상 렌더링마다 함수가 재생성되어 자식 컴포넌트의 불필요한 Re-render를 유발하는 구조적 한계 존재.

Technical Solution

• 컴파일 단계에서 Top-level 화살표 함수의 외부 의존성을 정밀 분석하는 Dependency Analysis 도입
• 분석된 외부 참조 값을 기반으로 React의 useCallback()과 Dependency Array를 자동 생성하는 매핑 로직 설계
• 불필요한 Hook 오버헤드 방지를 위해 의존성이 없는 순수 함수는 일반 함수 형태로 유지하는 최적화 규칙 적용
• 로컬 및 중첩 함수(Nested Functions)는 최적화 대상에서 제외하여 컴파일 복잡도 제어 및 런타임 안정성 확보
• Vue의 작성 스타일을 유지하면서 React의 메모이제이션 메커니즘을 강제하는 Compiler Toolchain 구축