Rails 측 데이터의 샘플을 React Component로 재현

Rails의 서버 쪽에서 기획한 데이터를 리액트로 재현하는 방법을 조사한 노트다.
이쪽 기사야. 계속해.
react-rails 및 web packer를 사용하여 Rails 응용 프로그램에서 React 실행

전제 조건

환경 확인

Rails 5.1.6

ruby 2.4.3

Mac OS X 10.13.4

rails new 응용 프로그램에 다음 Gem을 설치했습니다

react-rails

webpacker

추가

react-rails 및 web packer를 사용하여 Rails 응용 프로그램에서 React 실행단계

실현될 때까지 대략적인 절차

크게 두 단계로 나뉘어 제작한다.

Rails의 Controller 데이터를 JSON으로 되돌려 주는 API 만들기

API의 응답을 React의 Component로 표시

절차.

1. Rails의 Controller 데이터를 JSON으로 반환하는 API 만들기

API용 Controller 만들기

일반적인 Controller와 namespace를 분리하여 API용 Controller를 만듭니다.--no-assets --no-helper 옵션에 남아 있는 assets와 helper의 생성을 억제하면서 제작합니다.

$ rails g controller api/v1/welcomes --no-assets --no-helper

Controller 작업 정의

JSON이 반환해야 할 샘플 데이터를 산열로 정의합니다.
app/controllers/api/v1/welcomes_controller.rb

class Api::V1::WelcomesController < ApplicationController
  def index
    @data = { greeting: "HelloFromAPI" }
  end
end

뷰 생성하기

jbuilder 정의를 사용하여 JSON의 view를 반환합니다.
app/api/v1/welcomes/index.json.jbuilder

json.extract! @data, :greeting

창설

API의 route에 추가로 액세스합니다.

namespace :api, format: 'json' do
  namespace :v1  do
    resources :welcomes
  end
end

JSON의 반환 확인

방문http://localhost:3000/api/v1/welcomes, 아래 데이터를 표시하면 됩니다.

{"greeting":"HelloFromAPI"}

2. React의 Component를 통해 API 응답 표시

표시할 React의 Component 지정

JSON이 반환할 수 있는 데이터는 React의 Component를 통해 표시됩니다.
다음과 같이 props를 통해 표시할 Component와 JSON 데이터를 호출하는 API의 URL을 지정합니다.
app/views/welcomes/index.html.erb

<%= react_component("HelloWorld", url: "/api/v1/welcomes") %>

React의 Component 편집

참조React의 공식 문서: React의 Component를 다음과 같이 수정합니다.대체로 다음과 같은 처리가 추가되었다.

constructor에서 state

를 정의합니다.

componentDidMount()에서 aax 호출this.props.url에서 지정한 API를 통해state

에 결과를 설정합니다

render()에 state 내용 보이기

app/javascript/components/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      greeting: ''
    };
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            greeting: result.greeting
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            error
          });
        }
      )
  }

  render () {
    const { error, greeting } = this.state;
    return (
      <React.Fragment>
        Greeting: {greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

또한, React에서 aax를 사용할 때componentDidMount에 호출하고 setState에서Component를 업데이트해야 한다.이하 인용React의 공식 문서의 문장.
Where in the component lifecycle should I make an AJAX call?
You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.

화면 표시 확인

실행bin/webpack-dev-server과rails s의 상태에서 방문http://localhost:3000하여 아래 화면을 표시하면 된다.

끝맺다

이번에는 aax를 사용하여 React의 Component에서 Rails Controller 방면의 데이터를 처리하는 방법을 소개했다.Rails의 API에 대한 사용법과 jbuilder도 접할 수 있어서 정말 다행입니다.

참조 링크

react-rails로 리액션을 하는 Tutorial

GitHub - reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.

Rails의 jbuilder 쓰기 방법과 편리한 성어 및 방법