Rails와 React를 분리하여 SPA로 움직이는 기사는 많이 발견되지만, 그렇지 않고 Rails 프로젝트의 일부에서 React를 사용하는 방법.react-rails 라는 gem을 사용하는 방법입니다. 거의 이하의 gem에서의 도입 방법에 가까운 기사입니다.
reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.

환경

Rails 6.1.4

Ruby 3.0.0

React 도입

우선 도입하고 싶은 rails 프로젝트 디렉토리내로 이동해, rails 커멘드로 React와 그 관련 파일을 인스톨.

% rails webpacker:install:react

설치하면 app/javascript/packs/hello_react.jsx가 작성됩니다. 이것을 임의의 view 파일에 삽입한다.

내용은 이하.

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

파일의 선두에도 써 있는 대로, <%= javascript_pack_tag 'hello_react' %> 를 rails의 view 파일에 삽입하면(자) 이 컴퍼넌트가 렌더링 된다.

React 구성 요소를 Rails view로 표시

실제로 해본다.

※이하는 삽입하고 싶은 view 파일이 이미 있으면 특히 하지 않아도 괜찮습니다.
보기를 만들기 위해 책 모델의 scaffold를 실행 마이그레이션.

% rails g scaffold Book title:string content:text
% rails db:migrate

rails s 에서 먼저 화면을 확인.
http://localhost:3000/books


여기에 방금 전의 hello_react.jsx를 삽입해 본다.
app/views/books/index.html.erb

<% # 以下に挿入 %>
<%= javascript_pack_tag 'hello_react' %>
<p id="notice"><%= notice %></p>

<h1>Books</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
      <tr>
        <td><%= book.title %></td>
        <td><%= book.content %></td>
        <td><%= link_to 'Show', book %></td>
        <td><%= link_to 'Edit', edit_book_path(book) %></td>
        <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Book', new_book_path %>

표시를 확인하면 확실히 Hello React!가 렌더링됩니다.



단지 이 상태라면 삽입한 행의 위치에 관계없이 React 컴퍼넌트가 마지막에 렌더링 되어 버리므로 그것을 해소한다.

react-rails 도입

Gemfile에 다음을 추가.

gem 'react-rails'

추가한 gem을 설치.

% bundle install

그런 다음 다음 명령을 실행합니다.

% rails g react:install

그러면 app/javascript/components 라는 폴더가 만들어지므로 여기에 hello_react.jsx 를 여기로 이동.

렌더링에 관해서는 react-rails 가 해 주므로, 이동한 후 이하와 같이 변경.
app/javascript/components/hello_react.jsx

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}
// 以下を削除
// document.addEventListener('DOMContentLoaded', () => {
//   ReactDOM.render(
//     <Hello name="React" />,
//     document.body.appendChild(document.createElement('div')),
//   )
// })

// 以下を追記
export default Hello

react-rails 를 도입하는 것으로, react_component 라고 하는 메소드를 사용할 수 있게 된다. 렌더링하고 싶은 React 컴퍼넌트의 로드도 이하와 같이 기술을 변경.

# 以下を削除
<%= javascript_pack_tag 'hello_react' %>
# 以下を追記
<%= react_component('hello_react') %>
<p id="notice"><%= notice %></p>

<h1>Books</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
      <tr>
        <td><%= book.title %></td>
        <td><%= book.content %></td>
        <td><%= link_to 'Show', book %></td>
        <td><%= link_to 'Edit', edit_book_path(book) %></td>
        <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Book', new_book_path %>

이제 다시 렌더링해 보겠습니다.



이제 어디서나 React 구성 요소를 꽂을 수있었습니다!

view 파일로부터 값을 건네주고 싶은 경우는, 다음과 같이 한다.

<%= react_component('hello_react', { name: "react-rails" }) %>

이 이후 추가하고 싶은 React 컴퍼넌트가 있으면, app/javascript/components 부하에 jsx 되고 tsx 의 파일을 만들면 된다.