통합의 필요성 및 아키텍처 개요
Rails 애플리케이션은 Stimulus로 HTML을 강화하지만, 복잡한 UI 및 상호작용에는 React의 강력함이 요구됩니다. 전체 프론트엔드를 React로 전환하는 대신, 서버 렌더링된 Rails 뷰, Stimulus를 통한 대부분의 상호작용, 복잡한 컴포넌트에만 React를 활용하는 하이브리드 아키텍처가 최적입니다. 이는 Rails 뷰의 단순성, Stimulus의 DOM 조작, React의 컴포넌트 기반 UI 개발을 결합하여 관심사를 명확히 분리합니다.
Stimulus-React 브릿지 및 통신 패턴
React 통합을 위해 yarn add react react-dom 또는 react-rails 젬을 활용합니다. 핵심은 React 컴포넌트의 브릿지 역할을 하는 Stimulus 컨트롤러 생성입니다. 이 컨트롤러는 렌더링할 React 컴포넌트 식별(Stimulus name value), Rails 백엔드 데이터(JSON)를 React 컴포넌트의 props로 전달(Stimulus props value), 그리고 React 컴포넌트 라이프사이클(마운트/언마운트)을 관리합니다. Rails 뷰에서는 data-controller="react-component"와 name, props 속성으로 간결하게 통합합니다.
통신은 주로 세 가지 방식으로 이루어집니다:
-
Rails → React (데이터 하향):
valuesAPI를 통해 JSON 데이터를 props로 전달. -
React → Rails (이벤트 상향):
CustomEvent디스패치를 통해 Stimulus 컨트롤러가 수신. -
React → Stimulus (컴포넌트 조정): Stimulus 애플리케이션 인스턴스를 통한 직접 상호작용.
실제 적용 및 고려사항
react-otp-input과 같은 라이브러리를 활용한 OTP 인증 컴포넌트 통합 예시로 이 패턴의 실제 적용을 확인할 수 있습니다. React 래퍼 컴포넌트가 UI를 처리하고, Stimulus 브릿지 컨트롤러가 이를 마운트하며, 커스텀 이벤트를 통해 상태를 전달합니다.
주요 구현 과제로는 Turbo Drive 환경에서 React 컴포넌트 언마운트를 위한 라이프사이클 관리(turbo:before-visit 이벤트 활용)와 성능 최적화를 위한 서버 사이드 렌더링(SSR) 고려가 있습니다. 이 통합 패턴은 리치 텍스트 에디터, 인터랙티브 대시보드 등 다양한 복잡한 UI 컴포넌트 통합에 효과적으로 활용될 수 있습니다.