Superglue는 Rails의 다양한 MIME 타입 응답 기능을 활용하여 일반적인 foobar.html.erb 템플릿을 세 가지 친숙한 파일로 분할합니다.
Rails 중심의 작동 방식
foobar.json.props: Jbuilder와 유사한 템플릿으로 페이지의 속성(props)을 구성하는 프레젠터 역할을 합니다.foobar.(jsx|tsx): 위에서 생성된 props를 수신하는 React 페이지 컴포넌트입니다.foobar.html.erb: 브라우저가 페이지를 로드할 때 페이지 props를 Redux 스토어에 주입하는 역할을 합니다.
이러한 구조는 컴포넌트 구조에 맞춰 props를 구성할 수 있게 하며, form_props (React를 위한 form_with 포크), Redux 슬라이스로 통합된 플래시 메시지, UJS(Unobtrusive Javascript) 헬퍼와 같은 익숙한 Rails 편의 기능을 제공합니다.
React 통합 및 데이터 흐름
Superglue는 API 없이 작동합니다. json.props는 초기 요청 시 DOM에 스크립트 태그로 삽입되어 Redux 상태에 추가되며, useContent 훅을 통해 React 페이지 컴포넌트에 전달됩니다. 이 방식은 모든 데이터가 초기 요청에서 로드되도록 하여 API 호출의 필요성을 없앱니다.
Turbolinks에서 영감받은 SPA 전환
Superglue는 기존 Turbolinks에서 영감을 받아, foobar.html.erb 대신 foobar.json.props를 전송하여 React 및 Redux 앱에서 페이지 컴포넌트를 교체하는 SPA(Single Page Application) 전환을 구현합니다. 이는 data-sg-visit과 같은 UJS 헬퍼를 사용하여 선택적으로 활성화할 수 있습니다.
UJS의 재림과 동적 페이지 업데이트
Superglue의 핵심 기능 중 하나는 foobar.json.props가 쿼리 스트링을 통해 ‘탐색 가능’하여 페이지의 어떤 부분이라도 동적으로 만들 수 있다는 점입니다. data-sg-remote UJS 헬퍼와 쿼리 파라미터(?props_at=...)를 결합하면 json.props의 특정 노드만 가져와 Redux 스토어에 불변적으로 적용하여 페이지의 특정 부분을 다시 로드할 수 있습니다. 이는 모달, 채팅, 스트리밍 등 다양한 동적 기능에 효과적으로 활용될 수 있습니다.
통합 개발 도구 생태계
Superglue는 복잡한 React 개발 경험을 개선하기 위해 다음과 같은 지원 도구들을 함께 제공합니다:
* Superglue JS: Rails와 React를 연결하는 핵심 자바스크립트 라이브러리.
* Superglue Rails: 설치 및 스캐폴딩을 위한 Rails 통합 헬퍼 및 제너레이터.
* PropsTemplate: UJS에 강력한 기능을 부여하는 매우 빠른 JSON 빌더.
* Humid: MiniRacer 및 V8 격리 환경을 활용한 서버 사이드 렌더링(SSR).
* FormProps: React와 함께 Rails 폼을 사용할 수 있게 하는 form_with FormBuilder.
* CandyWrapper: FormProps와 연동되는 인기 React UI 라이브러리용 경량 래퍼 컴포넌트.