Hotwire Native는 SwiftUI, Jetpack Compose 등 전통적인 네이티브 UI 구축 방식과 차별화되어, 앱 내 웹 브라우저로 HTML UI를 렌더링하고 네이티브 내비게이션을 활용합니다. 이 작동 방식을 이해하는 데 필수적인 세 가지 핵심 구성 요소는 TurboJS, 네이티브 어댑터, 브릿지 컴포넌트입니다.
TurboJS의 역할
-
Hotwire Native의 근간인 TurboJS는 동일 도메인 내의 클릭 및 폼 제출을 가로채어 기본 브라우저 동작을 막습니다.
-
History API로 URL을 변경하고 Fetch API로 페이지 콘텐츠를 업데이트하여, 복잡성 없이 SPA와 유사한 사용자 경험을 제공합니다.
-
헤드 및 바디 태그 병합을 처리하며, Hotwire Native에서 ‘애플리케이션 방문(Application Visits)’ 개념을 이해하는 것이 중요합니다.
네이티브 어댑터
-
TurboJS는 브라우저 이벤트에 응답하는 저수준 기능을 위해 어댑터 패턴을 사용합니다.
-
Hotwire Native iOS 및 Android는 앱 시작 시 웹 뷰와 함께 초기화되는 고유의 네이티브 어댑터를 구현합니다.
-
이 어댑터들은 Rails 애플리케이션과 네이티브 환경 사이의 중요한 연결 다리 역할을 수행합니다.
브릿지 컴포넌트
-
Hotwire Native 앱 디버깅의 핵심 요소 중 하나는 브릿지 컴포넌트입니다.
-
이는 웹 뷰와 네이티브 구성 요소 간에 메시지를 간단하게 주고받는 시스템으로, 문제 발생 시 디버깅 시작점을 파악하는 데 결정적인 통찰을 제공합니다.