Rails와 Webpacker로 ReactJS 구성

Source: Dev.to

전제 조건

• Ruby 2.5.1 이상
• Rails 5.2.1 이상
• Webpacker 3.5.5 이상

Webpacker로 새로운 Rails 앱 만들기

rails new rails-with-reactjs --skip-test --webpack

이 명령은 애플리케이션을 생성하고 Webpacker를 설정하며, 테스트 구조는 생략합니다.

Webpacker를 통해 React 설치

bundle exec rails webpacker:install:react

이 명령은:

• 프로젝트 루트에 Babel 설정을 추가합니다.
• app/javascript/packs/hello_react.jsx에 예제 팩을 생성합니다.
• .jsx 파일을 해석하도록 Webpacker를 업데이트합니다.
• 필요한 모든 React 의존성을 설치합니다.

생성된 hello_react.jsx는 컴포넌트를 바로 “에 주입합니다.
일반적으로는 전용 폴더에 컴포넌트를 정리하고 react-rails로 마운트하는 것이 좋습니다.

react-rails gem 추가

Gemfile에 gem을 추가합니다:

gem 'react-rails'

그런 다음 실행합니다:

bundle install

react-rails에서 사용하는 JavaScript 드라이버를 설치합니다:

yarn add react_ujs

react_ujs는 페이지를 스캔하고 data-react-class와 data-react-props를 사용해 컴포넌트를 마운트합니다.

React 컴포넌트 정리

컴포넌트를 위한 폴더를 만들고 간단한 컴포넌트를 추가합니다:

mkdir -p app/javascript/components
touch app/javascript/components/hello_world.jsx

app/javascript/components/hello_world.jsx

import React, { Component } from 'react';

export default class HelloWorld extends Component {
  render() {
    return 
## Hello World
;
  }
}

react-rails로 컴포넌트 등록

app/javascript/packs/application.js를 편집하고 마지막에 다음을 추가합니다:

// app/javascript/packs/application.js
const componentRequireContext = require.context('components', true);
const ReactRailsUJS = require('react_ujs');
ReactRailsUJS.useContext(componentRequireContext);

레이아웃 업데이트

app/views/layouts/application.html.erb에서 기본 asset‑pipeline JavaScript 태그를 Webpacker 팩 태그로 교체합니다:

컨트롤러와 라우트 생성

정적 페이지용 간단한 컨트롤러를 생성합니다:

rails g controller pages index --no-helper --no-assets --no-controller-specs --no-view-specs

config/routes.rb를 업데이트합니다:

# config/routes.rb
root 'pages#index'

뷰에서 React 컴포넌트 렌더링

app/views/pages/index.html.erb에 다음을 추가합니다:

애플리케이션 실행

Rails 서버를 시작합니다:

rails s

별도의 터미널에서 실시간 컴파일을 위한 Webpack dev 서버를 시작합니다:

bin/webpack-dev-server

http://localhost:3000에 접속하면 Hello World가 React에 의해 렌더링된 것을 확인할 수 있습니다.

참고 자료

• GitHub 예제 저장소
• 공식 Rails/Webpacker 문서
• react-rails gem 문서