레일을 사용한 React 구성요소 마운팅: 동적 인터페이스 단순화

최신 애플리케이션에는 API 호출, 동적 양식 및 라우팅을 처리할 수 있는 동적 인터페이스가 필요한 경우가 많으며 React는 탁월한 선택입니다. 그러나 React의 단일 페이지 애플리케이션(SPA) 접근 방식은 서버측에서 콘텐츠를 렌더링하는 풀 스택 프레임워크인 Ruby on Rails와 잘 어울리지 않습니다. API 백엔드를 설정하거나 Webpack 통합을 사용하여 Rails와 함께 React를 사용하는 것이 가능하지만 이로 인해 상당한 복잡성과 개발 시간이 추가됩니다.

도전

Raive, Dunu506과 같은 프로젝트에서는 실시간 상호작용이 필요한 복잡한 마법사와 같은 동적 기능이 필요합니다. Rails의 기존 서버 측 렌더링은 이러한 사용 사례에서는 번거롭고 React의 동적 특성은 완벽하게 맞습니다.

그런데 SPA를 완전히 도입하지 않고 어떻게 React를 사용하나요? 해결책은 간단합니다. Rails의 서버 측 렌더링 접근 방식을 포기하지 않고 Rails 뷰에 React 구성 요소를 마운트할 수 있습니다.

솔루션

React 구성 요소는 서버 측 렌더링 뷰의 특정 요소에 첨부될 수 있습니다. 시작하는 방법은 다음과 같습니다.

기본 마운트: app/javascript/packs/application.js에서 간단한 React 구성요소를 마운트합니다.

<code class="language-javascript">import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

document.addEventListener('DOMContentLoaded', () => {
  const div = document.querySelector('#hello')

  if (div) {
    const props = JSON.parse(div.getAttribute('data-props'))
    ReactDOM.render(<Hello />, div)
  }
})</code>

재사용성: 그런 다음 구성 요소를 동적으로 마운트하기 위해 재사용 가능한 함수를 만들었습니다.

<code class="language-javascript">import MyReactComponent from './MyReactComponent'

function mountComponent(id, Component) {
  document.addEventListener('DOMContentLoaded', () => {
    const div = document.querySelector(id)

    if (div) {
      const props = JSON.parse(div.getAttribute('data-props'))
      ReactDOM.render(<Component {...props} />, div)
    }
  })
}

mountComponent('#my-react-component', MyReactComponent)</code>

여러 구성 요소 처리: 동일한 구성 요소를 여러 장소에서 재사용해야 하는 상황을 위해 다음 방법을 일반화했습니다.

<code class="language-javascript">function mountComponent(selector, Component) {
  document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll(selector)

    elements.forEach(element => {
      const props = JSON.parse(element.getAttribute('data-props'))
      ReactDOM.render(<Component {...props} />, element)
    })
  })
}</code>

충돌 방지: 다른 CSS 또는 JS 클래스와의 충돌을 피하기 위해 ID 또는 클래스를 사용하는 대신 사용자 정의 데이터 구성 요소 속성을 사용하기로 결정했습니다.

<code class="language-javascript">function mountComponents(components) {
  document.addEventListener('DOMContentLoaded', () => {
    const roots = document.querySelectorAll('[data-component]')

    Array.from(roots).forEach((root) => {
      const props = JSON.parse(root.dataset.props)
      const Component = components[root.dataset.component]

      ReactDOM.render(<Component {...props} />, root)
    })
  })
}

mountComponents({ MyReactComponent })</code>

결과

이 솔루션은 Rails 뷰에 React 구성 요소를 마운트하는 깔끔하고 재사용 가능한 방법을 제공합니다. 이를 통해 Rails 서버 측 렌더링의 단순성을 유지하면서 React의 동적 기능을 활용할 수 있습니다. 우리는 이 접근 방식을 모든 프로젝트에서 사용할 수 있는 라이브러리에 패키지하여 개발 시간을 절약하고 작업 흐름을 간소화했습니다.

결론

data-comminer 속성을 사용하고 React 구성요소를 동적으로 마운트하는 간단한 함수를 생성함으로써 우리는 React의 강력한 기능과 Rails의 전통적인 서버 측 렌더링 접근 방식을 성공적으로 결합했습니다. 이 접근 방식은 유연하고 재사용 가능하며 간결하므로 Rails 애플리케이션에서 동적 인터페이스가 필요한 팀에 적합합니다.

자세한 내용을 알아보고 이 프로젝트에 참여하려면 언제든지 GitHub 저장소를 확인하세요!

위 내용은 레일을 사용한 React 구성요소 마운팅: 동적 인터페이스 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!