VuReact가 Vue 3의 defineSlots()를 React로 어떻게 컴파일하나요?

Source: Dev.to

VuReact은 Vue에서 React로 마이그레이션하기 위한 컴파일러 툴체인이며, Vue 3 문법으로 React를 작성할 수 있게 해줍니다.
이 글에서는 Vue 3의 defineSlots() 매크로가 React에 어떻게 매핑되는지 살펴보겠습니다.

예시를 쉽게 읽을 수 있도록, 이 글은 두 가지 간단한 규칙을 따릅니다:

• 모든 Vue와 React 코드 조각은 핵심 로직에만 집중하고, 전체 컴포넌트 래퍼와 관련 없는 설정은 생략합니다.
• 논의는 여러분이 이미 Vue 3 defineSlots()의 API 형태와 핵심 동작에 익숙하다고 가정합니다.

defineSlots() → React 슬롯 prop 타입

defineSlots()는 Vue 3 내부에서 컴포넌트 슬롯 타입을 선언할 때 사용하는 매크로입니다.
VuReact은 이를 런타임 Hook으로 컴파일하지 않습니다. 대신 슬롯 선언을 해당하는 React prop 타입으로 매핑하는데, 슬롯 형태에 따라 children 또는 함수형 prop이 됩니다.

Vue

const slots = defineSlots();

컴파일된 React

type ICompProps = {
  children?: React.ReactNode;
  footer?: (props: { count: number }) => React.ReactNode;
};

예시에서 볼 수 있듯이 Vue defineSlots()는 런타임 API가 아니라 React prop 타입으로 변환됩니다.
VuReact은 기본 슬롯을 children에, 명명된 슬롯을 해당 함수형 prop에 매핑하여 Vue 슬롯과 React 컴포지션 패턴 사이의 자연스러운 관계를 유지합니다.

GitHub: https://github.com/vureact-js/core

Docs: https://vureact.top/en/guide/semantic-comparison/script/define-slot.html