Ch4. Expo UI — SwiftUI·Compose 선언형 네이티브

개요

Expo UI는 SwiftUI(iOS)와 Jetpack Compose(Android)의 네이티브 컴포넌트를 JS/TS에서 직접 선언하는 시스템입니다. React Native의 View 트리를 거치지 않고 플랫폼 네이티브 렌더링을 사용하므로, 시스템 UI와의 일관성과 성능이 뛰어납니다.

SwiftUI 컴포넌트

SDK 55에서 사용 가능한 SwiftUI 기반 컴포넌트:

import { Button, DatePicker, Toggle, Slider, ProgressView } from 'expo-ui/swift';

export default function SettingsScreen() {
  return (
    <>
      <Toggle value={enabled} onValueChange={setEnabled} label="알림" />
      <Slider value={volume} onValueChange={setVolume}
        minimumValue={0} maximumValue={1} />
      <DatePicker value={date} onDateChange={setDate} />
      <ProgressView progress={0.7} />
      <Button title="저장" onPress={handleSave} />
    </>
  );
}

Jetpack Compose 컴포넌트 (Beta)

SDK 55에서 Compose 지원이 알파에서 베타로 승격되었습니다. 기존 클래스 기반 패턴 대신 함수형 DSL 패턴이 도입되었습니다.

Material 3 컴포넌트

Beta 승격과 함께 추가된 Material 3 컴포넌트:

프로덕션 적용 전략

점진적 도입 권장

1. 설정 화면 등 비핵심 UI에서 Expo UI 시작
2. SwiftUI는 바로 프로덕션 적용 가능 (Stable)
3. Compose는 Beta — 핵심 플로우보다는 보조 화면에 우선 적용
4. 커스텀 View/Modifier가 필요하면 Expo Modules API v2로 확장

플랫폼별 분기 패턴

import { Platform } from 'react-native';

const NativeToggle = Platform.select({
  ios: () => require('expo-ui/swift').Toggle,
  android: () => require('expo-ui/compose').Switch,
  default: () => require('react-native').Switch,
})();

AI 통합 — expo/skills + expo-mcp

Expo는 AI 에이전트가 네이티브 UI를 생성·수정할 수 있도록 두 가지 도구를 제공합니다:

• expo/skills: AI 모델이 Expo UI 컴포넌트를 올바르게 생성하도록 돕는 프롬프트/스킬 세트
• expo-mcp: MCP(Model Context Protocol) 서버로, AI 에이전트가 Expo 프로젝트 컨텍스트를 읽고 코드를 생성하는 데 활용

이를 통해 Claude, Cursor 등의 AI 도구에서 Expo UI 컴포넌트를 정확한 API로 생성할 수 있습니다.

주의사항

• Expo UI 컴포넌트는 React Native View 트리 외부에서 렌더링 — onLayout, measure() 등 RN 레이아웃 API 미지원
• 커스텀 스타일링은 각 플랫폼의 네이티브 API를 따름 (CSS/StyleSheet 미적용)
• Compose Beta는 API 변경 가능성 있음 — 버전 고정 권장