Rails + React 사용하기

일반적으로 Rails 와 React 를 같이 사용하면 Route 가 꼬이게 됩니다.

방법은 크게 2가지가 있는데 오늘은 두번째 방법을 알아보려고 합니다.

Rails 의 각 View 마다 React Component 를 불러와 사용하는 방법
Rails View 는 하나로 고정하고 React가 가진 Route 로 View 단을 전체 관리하는 방법

그러려면 먼저 Rails Route 를 하나로 고정하고 React-Router 와 같은 라이브러리로 View Route 를 관리해야 합니다.

프로젝트를 생성해줍니다.

rails new sample --webpack=react

components 폴더를 생성 할 수 있도록 코드를 좀 더 추가합니다.

Gemfile

gem 'react-rails'

설치 후 react components 폴더를 생성해줍니다.

rails webpacker:install:react

진행하면 파일이 몇개 추가로 생성되고 폴더로 추가 생성됩니다.

create app/javascript/components
append app/javascript/packs/application.js
create app/javascript/packs/server_rendering.js

config/routes.rb 파일을 수정합니다.

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root 'home#index'

  get "*page", to: "home#index", constraints: -> (req) do
    !req.xhr? && req.format.html?
  end
end

이렇게되면 모든 HTTP 통신은 home#index 로 들어오게 됩니다.

마지막으로 View 처리를 맡아줄 Controller 를 생성해줍니다.

rails g controller home index

생성된 views/home/index.html.erb 에서 메인이 되는 React Component 를 불러줍니다.

<%= react_component "App" %>

저는 메인으로 사용할 Component 를 app/javascript/components/App.js 에 작성했습니다.

import React from "react";

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
};

export default App;

그리고 서버를 실행하면 됩니다.

다음에는 typescript 를 사용하고 있으니 typescript 를 사용할 수 있도록 추가 설정을 해보도록 하겠습니다.

JoungSik/Rails + React 사용하기

Rails + React 사용하기