소개

React 공식 튜토리얼에 도전하기 위해 Rails 서버에서 React를 동작시키는 환경을 구축해 나갈 것입니다!

Rails5.1부터 webpacker나 npm, yarn 등에 대응했기 때문에, 이것들을 이용해 React를 사용할 수 있도록 합니다.

목차

1. yarn 설치

2. Rails 프로젝트 만들기

3. Gemfile 편집

4. webpack,react 설치

5. 동작 확인

전제 환경

cloud9 (amazon linux)

Ruby 2.6

Rails 5.1

node 10.16

실천

1. yarn 설치

먼저 yarn을 설치합니다.

$ npm install -g yarn

2. Rails 프로젝트 만들기

익숙한 rails new 해갑니다.
그런 다음 디렉토리를 만든 프로젝트로 변경합니다.

$ rails new webpack_test --skip-turbolinks && cd webpack_test

turbolinks는 Javascript에서 결함의 원인이 될 수 있으므로 사용하지 않습니다.

3. Gemfile 편집

webpacker gem을 설치하기 위해 만든 프로젝트 폴더에서 Gemfile을 편집합니다.

~省略~

gem "webpacker"

Gemfile을 저장하고 bundle install

4. webpack,react 설치

webpack과 react를 각각 설치합니다.

$ rails webpacker:install
$ rails webpacker:install:react

그리고 마지막으로
HTML 헤더를 다음과 같이 편집합니다.javascript_include_tag → javascript_pack_tag
javascript를 호출할 때 webpacker의 헬퍼 태그로 <%=javascript_pack_tag'FILE_NAME'%> 라고 기술합니다.

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application' %>

5. 실제로 동작시켜 보자!

성공적으로 설치할 수 있다면app/javascript/hello_react.jsx 가 작성되었다고 생각합니다.
react는 jsx 내에서 작동하므로 jsx 파일을 호출하여 react를 이동합니다.

시도해 보면 hello_react.jsx를 표시하겠습니다.

먼저 controller와 view를 만들고 route를 할당합니다.

rails g controller react_app index

config/routes.rb

Rails.application.routes.draw do
  get 'react_app/index'
end

작성한 view로 jsx 파일을 호출합니다.

view/react_app/index

<%=javascript_pack_tag 'hello_react'%>

rails 서버를 시작하여 올바르게 표시되는지 확인합니다.

rails s

react_app/index 에 접속해 Hello React! 라고 표시되면 React의 도입은 완료입니다.

6. React 자습서 준비

공식 React 튜토리얼

우선, 튜토리얼용으로 새로운 jsx 파일을 만들어 갑시다.app/javascript/pack/ 에 tutorial.jsx 를 작성해 둡니다.
tutorial.jsx 안에 react를 가져옵니다.

tutorial.jsx

import React from "react"
import ReactDOM from "react-dom"
//ここから下の行にチュートリアルの内容を記述していく

실제로 튜토리얼의 스타터 코드를 tutorial.jsx 에 기술해 동작을 확인해 보겠습니다.

tutorial.jsx

import React from "react"
import ReactDOM from "react-dom"

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

rails s 를 실행하여 react_app/index 에 액세스해 봅니다.

이 화면이 있으면 react는 정상적으로 작동하고 있습니다.


이대로는, 디자인이 이상하기 때문에 스타터 코드의 css를 적응해 갑니다.

app/assets/stylesheets/react_app.scss

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

rails s를 다시 실행하고 react_app/index에 연결하면
이와 같은 화면이 되면 튜토리얼의 준비는 완료입니다.

후기

기사를 쓰는 경험이 처음이었지만 생각보다 힘들었습니다 ....
알기 어려운 부분, 이르지 않는 부분이 있으면 수정합니다.