Superglue란?
- Superglue는 Rails의 핵심 기능을 유지하며 React 및 Redux를 통합하여 개발 속도 저하 없이 React의 장점을 활용할 수 있도록 돕는 프레임워크입니다.
- React를 Rails에 통합하는 방식은 부분적 로딩,
react_on_rails와 같은 라이브러리 사용, 또는 Inertia Rails나 Superglue와 같은 혼합 접근 방식이 있습니다. Superglue는 혼합 접근 방식에 속합니다. - Inertia와 개념적으로 유사하지만, Superglue는 컨트롤러 액션 이름과 일치하는
.json.props파일에서 데이터를 가져오며 React와 Redux 스택을 사용한다는 점에서 차이가 있습니다.
작동 방식
- Superglue는 명시적인 API 생성 없이 Thoughtbot에서 개발한 JSON 템플릿 DSL인 PropsTemplate을 활용하여
.json.props뷰 파일을 통해 Rails 애플리케이션과 React 뷰를 연결합니다. - React 컴포넌트는
useContent훅을 통해.props.json파일에 정의된 데이터를 Redux 스토어에서 가져옵니다. - PropsTemplate의 주요 기능은 특정 노드를 지정하여 전체 파일을 평가할 필요 없이 부분 업데이트를 생성할 수 있다는 점입니다.
- Rails 뷰는 React 페이지 컴포넌트로 대체되며, Superglue가 API 호출이나 수동적인 프롭 전달을 처리합니다.
- UJS(Unobtrusive JavaScript)를 사용하여 SPA와 유사한 탐색 경험과 부분 페이지 리로드를 제공합니다.
data-sg-visit은 페이지 이동 시,data-sg-remote는 페이지 일부만 리로드할 때 사용됩니다.
주요 기능 구현
- 플래시 메시지: Superglue는 플래시 메시지를 Redux 스토어에 마운트하여
useSelector훅을 통해 전역적으로 접근할 수 있도록 합니다.tailwind-variants와Lucide를 활용하여 스타일링된Flash컴포넌트를 구현할 수 있습니다. - 폼 처리: Rails 폼 헬퍼와
form_propsgem을 사용하여 CSRF 보호 등 Rails의 이점을 유지하며 React 컴포넌트에서 폼을 생성하고 유효성 검사 오류를 처리합니다.Inputs.jsx파일에 정의된 기본 입력 컴포넌트를 활용합니다. - 사용자 인증: Rails
auth제너레이터로 생성된 인증 흐름을 Superglue와 연동하여 로그인 및 로그아웃 기능을 구현합니다. 사용자 정보는application.json.props에 추가하여 전역적으로 접근하며, React 컴포넌트에서 인증 상태에 따라 UI를 조건부로 렌더링할 수 있습니다. - Redux 커스텀 슬라이스:
flash와 유사하게 Redux 슬라이스를 정의하여 클라이언트-서버 간 상태 동기화가 필요한 전역 상태(예: 포모도로 카운터)를 관리합니다. - 검색 기능:
data-sg-remote속성과props_at파라미터를 활용한 Superglue 원격 요청을 통해 백엔드에 불필요한 요청 없이 검색 결과를 부분적으로 업데이트하는 기능을 구축할 수 있습니다. - 서버사이드 렌더링(SSR): Humid 라이브러리를 사용하여 검색 엔진 최적화(SEO)에 유리한 SSR 페이지를 생성합니다.
server_rendering.js파일을 빌드하고 Rails 뷰에서Humid.render함수를 호출하여 HTML을 미리 렌더링합니다.