Rails 서버를 위한 기본 React.js 프론트 엔드 설정하기

따라서 따라왔다면 JSON을 반환하는 기본 Rails 서버가 있는 것입니다.

이제 기본 React.js 프런트 엔드에 연결해 보겠습니다.


react-rails gem을 사용하여 React와 Rails를 연결할 것입니다. 따라서 Gemfile 에 추가해 보겠습니다. 거기에 행gem 'react-rails'을 추가하기만 하면 터미널에서 여러 명령을 실행해야 합니다.

bundle install
rails webpacker:install
rails webpacker:install:react
rails generate react:install

그리고 우리는 Rails 서버에 React.js를 연결했습니다. 이제 백엔드와 통신하기 위해 React.js 구성 요소를 작성해야 합니다.


하지만 그 전에 Rails 서버에서 처리해야 할 몇 가지 사항이 더 있습니다. 우리는 React.js 코드로 정적 페이지를 제공할 것이므로 Rails에게 이를 표시하는 방법을 알려야 합니다.

이제 rails g controller Home 를 사용하여 홈 컨트롤러를 생성해 보겠습니다. 이 컨트롤러는 매우 간단할 테니 걱정하지 마세요. 먼저 경로를 추가해 보겠습니다. 계속해서 root 'home#index'를 config/routes.rb에 추가하십시오. 이것은 루트 디렉토리를 우리의 React.js 페이지를 보여줄 홈 컨트롤러로 라우팅할 것입니다.

이제 app/controllers/home_controller.rb를 설정해 보겠습니다.

class HomeController < ApplicationController
  def index
  end
end

그게 다야 이 경우 우리가 하고 싶은 것은 그것이 존재한다는 것뿐입니다. 그렇게 하면 Rails가 뷰를 렌더링합니다. 이제 설정도 해봅시다. app/views/home/index.html.erb 를 만듭니다.

<%= react_component 'app' %>

그게 다야 전체 파일입니다.

프론트 엔드가 백 엔드와 통신할 수 있도록 axios를 빠르게 잡아봅시다. 그러니 계속해서 실행하십시오 yarn add axios .

이제 실제로 React.js 작성을 시작할 수 있으며 index.html.erb에서 호출한 것과 동일한 구성 요소 이름을 지정하기만 하면 됩니다. 따라서 app/javascript/components/app.jsx 파일을 만듭니다. 여기에서 Rails가 구성 요소를 찾을 것입니다.

이제 매우 기본적인 React.js 구성 요소를 설정해 보겠습니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const app = () => {
  const [dogState, setDogState] = useState([]);

  useEffect(() => {
    axios({
      method: 'GET',
      url: '/dogs'
    })
    .then(({data}) => {
      setDogState(data);
    })
  }, []);

  return (
    <div>
      <h1>These are our dogs</h1>
      {dogState.map((dog, i)=>(
        <div key={dog.id}>
          <p>{dog.name} age: {dog.age}</p>
        </div>
      ))}
    </div>
  )
}
export default app;

여기서 우리는 useEffect에서 axios 호출을 사용하여 시작 개 상태를 설정합니다. 그런 다음 그 개 목록을 표시합니다. 하지만 우리는 그 이상을 하고 싶습니다. 목록에 새 개를 추가하는 양식도 추가해 봅시다!

계속해서 return 문의 가장 바깥쪽 div 태그 안에 이것을 추가하세요.

<form>
  <label>Name:
    <input onChange={changeHandler} type="text" id="name" value={dogInfo.name}/>
  </label>
  <label>Age:
    <input onChange={changeHandler} type="number" id="age" value={dogInfo.age}/>
  </label>
  <button onClick={addDog}>Add Dog</button>
</form>

이것은 매우 기본적인 형식이지만 우리가 아직 가지고 있지 않은 것들을 찾고 있습니다. changeHandler 함수, addDog 함수 및 양식을 관리하는 새로운 상태에 주목하십시오.

먼저 양식을 관리하고 초기 값을 제공할 새 상태를 추가해 보겠습니다.

const [dogInfo, setDogInfo] = useState({name: '', age: 0});

이제 양식 입력 중 하나를 변경할 때마다 dogInfo 상태를 업데이트하는 changeHandler 함수를 설정해 보겠습니다.

const changeHandler = ({target}) => {
  setDogInfo((prev) => ({...prev, [target.id]:target.value}));
}

이제 API 경로를 호출하는 addDog 함수도 추가합니다.

const addDog = (e) => {
  e.preventDefault();
  axios({
    method: 'POST',
    url: '/dogs',
    data: dogInfo
  })
  .then(({data}) => {
    setDogState((prev) => {
      const newList = [...prev];
      newList.push(data);
      return newList;
    });
  })
};

우리는 Rails API를 다른 백엔드를 호출하는 것과 똑같이 호출합니다. 쉽습니다. 그런 다음 새로운 정보로 dog state를 업데이트합니다. React가 DOM 업데이트를 알 수 있도록 새 객체를 반환하는 방법에 주목하세요.

이제 개를 추가할 수 있으므로 개를 제거하고 편집하는 방법이 필요합니다. 따라서 해당 버튼을 map 에 추가해 보겠습니다. 따라서 다음과 같이 업데이트하면 됩니다.

{dogState.map((dog, i)=>(
  <div key={dog.id}>
    <p>{dog.name} age: {dog.age}</p>
    <button onClick={()=>removeDog(dog.id, i)}>Remove</button>
    <button onClick={()=>updateDog(dog.id, i)}>Update</button>
  </div>
))}

이러한 기능을 구성 요소에도 추가해야 합니다. 이제 추가해 보겠습니다.

const removeDog = (id, i) => {
  axios({
    method: 'DELETE',
    url: `/dogs/${id}`
  })
  .then(() => {
    setDogState((prev) => {
      const newList = [...prev]
      newList.splice(i, 1);
      return newList;
    });
  })
}

const updateDog = (id, i) => {
  axios({
    method: 'PUT',
    url: `/dogs/${id}`,
    data: dogInfo
  })
  .then(({data}) => {
    setDogState((prev) => {
      const newList = [...prev];
      newList[i] = data;
      return newList;
    })
  })
}

이 두 가지는 addDog 함수와 매우 유사해 보입니다. 우리는 관련 axios 호출을 수행한 다음 다시 받은 응답으로 프런트 엔드의 상태를 업데이트합니다.

나는 모든 오류 검사를 생략했으며 이것은 매우 기본적인 구성 요소입니다. 그러나 여기서 관찰해야 할 중요한 점은 이것이 단지 일반 React.js 구성 요소라는 것입니다.


그리고 그게 다야. 이것은 CRUD Rails 서버를 설정하고 이에 대해 말하는 React.js 프론트 엔드와 함께 실행하는 방법에 대한 매우 기본적인 설명이었습니다. 여기서는 단순화된 예제로 작업하고 있다는 점을 기억하세요. 하지만 이 작업을 통해 스스로 시도해 볼 수 있는 용기가 되었기를 바랍니다.