Superglue는 Rails 개발자가 React 애플리케이션을 구축할 때 Rails의 생산성을 그대로 가져올 수 있도록 여러 핵심 기능을 제공합니다. 이는 기존 Rails의 워크플로우를 React 환경에 통합하는 방식으로 구현됩니다.
Rails 경험의 재현
-
기본 구조 재현: Rails의 라우트, 컨트롤러, 액션 생성 과정을 React 컴포넌트(JSX)를 사용하는 뷰와 함께 그대로 따릅니다. 이는
rails generate controller posts index와 같은 익숙한 명령어를 통해 시작됩니다. -
데이터 흐름:
props_template(Jbuilder 호환 라이브러리)를 사용하여 Rails 백엔드에서 JSON 데이터를 정의하고, React 컴포넌트에서는 Superglue의useContent훅을 통해 이 데이터를 쉽게 접근할 수 있습니다. 이를 통해 Rails 헬퍼에도 접근 가능합니다.
클래식 Rails 기능의 React 통합
-
Unobtrusive JavaScript (UJS) 재도입:
data-sg-visit데이터 속성을 링크나 폼에 추가하여 싱글 페이지 애플리케이션(SPA)과 같은 부드러운 페이지 전환 기능을 제공합니다. 백그라운드에서 다음 페이지의 JSON 데이터를 로드하고 React 애플리케이션에 교체하여 CSS나 JavaScript 재로딩 없이 작동합니다. -
Rails 폼 (Form Props): Rails의
form_with헬퍼를 포크하여form_props라이브러리를 통해 HTML 대신 JSON을 출력합니다. 이 JSON은 React UI 라이브러리(예: Mantine, Shadcn, React Aria)와 함께 사용하여 유연하게 폼을 구성할 수 있으며,candy wrapper라는 경량 래퍼 컴포넌트를 통해 쉽게 통합됩니다. -
Flash 메시지: Rails의 Flash 메시지 기능을 React 애플리케이션에 그대로 가져와, React Redux 셀렉터를 통해 상태에서 Flash 메시지를 가져와 UI에 표시할 수 있습니다. Superglue는 Redux 위에 구축된 레이어이지만, 다른 상태 관리 라이브러리도 지원합니다.
-
Turbo Streams 포팅: Hotwire Turbo Streams와 유사하게 JSON 파셜을 사용하여 웹소켓을 통해 상태를 브로드캐스트하고 프론트엔드에서 부분적인 업데이트를 수행합니다. 이는 서버에서 특정 UI 영역을 효율적으로 업데이트하는 데 활용됩니다.
개발 및 성능 향상
-
빠른 테스트 (Humid): MiniRacer 위에 구축된 경량 래퍼인 Humid를 사용하여 V8 격리 환경에서 서버 측 렌더링을 수행함으로써 시스템 테스트 속도를 크게 향상시킵니다. 이는 Chrome 드라이버 없이도 페이지 직접 방문 테스트를 빠르게 실행할 수 있게 합니다.
-
Deferment: 템플릿 내에서 비용이 많이 드는 블록의 실행을 지연시켜 초기 페이지 로드 시간을 단축하고 사용자 경험을 개선합니다. 데이터는 비동기적으로 로드됩니다.
-
Digging: 쿼리 파라미터와 UJS 데이터 속성을 통해 페이지의 특정 부분을 다시 로드할 수 있는 기능으로, 모달, 툴팁, 탭 등 동적인 UI 요소를 구축하는 데 유용합니다.
-
성능 최적화:
useContent훅을 효율적으로 사용하여 하위 컴포넌트가 props 변경 시에만 업데이트되고, 불필요한 상위 컴포넌트 리렌더링을 방지합니다. -
ERB 뷰와의 혼용: Superglue는 기존 ERB 뷰와 함께 사용할 수 있어, React를 필요한 페이지에만 선택적으로 적용할 수 있는 유연성을 제공합니다.