Computer >> 컴퓨터 >  >> 프로그램 작성 >> Ruby

React on Rails:간단한 앱 빌드

애플리케이션의 전체 프론트엔드 측면을 구축하는 회사는 종종 Rails와 같은 동일한 프레임워크를 선택하여 백엔드를 구축합니다. 수년 동안 이것이 가장 훌륭하고 신뢰할 수 있는 옵션이었습니다.

오늘날 끊임없이 진화하는 프런트 엔드 세계에서 수많은 라이브러리와 프레임워크를 통해 개발자는 백 엔드와 프런트 엔드 모두에 대해 서로 다른 플랫폼을 선택하고 쉽게 통합할 수 있습니다.

React는 프론트엔드 Pangea의 거물이 되었습니다. Ruby on Rails로 작업하는 경우 기본 Rails 페이지를 React 코드(또는 다른 전면 프레임워크)로 전환해야 할 가능성이 있습니다. 아마도 Rails + React 기능을 좋아하고 두 기술의 기능을 단일 앱에 통합하고 싶을 것입니다.

그리고, 괜찮아! 이 기사는 맥주 제품의 재고를 관리하는 CRUD 애플리케이션인 실제 사례를 탐구하는 것을 목표로 합니다. 처음에는 Rails로 만든 다음 React로 만든 새로운 프론트엔드가 추가로 통합될 것입니다.

React on Rails:간단한 앱 빌드 맥주 CRUD 애플리케이션.

몇 단계를 거치면 React의 주요 부분, Rails가 이를 수용하는 방법, Rails와 React를 미래 프로젝트에 통합하는 방법을 이해할 수 있습니다.

설정

전제 조건으로 Ruby(및 Rails), Node.js 및 Yarn으로 환경을 설정해야 합니다.

전면 패키지를 관리하기 위해 npm을 선택하는 것이 바람직하지만 단순성을 위해 Yarn을 사용하겠습니다.

원하는 폴더에서 다음 명령을 실행하십시오.

rails new crud-rails-react

이것은 우리의 Rails 프로젝트를 시작할 것입니다. 그런 다음 IDE에서 생성된 프로젝트를 열고 Gemfile .

이 명령이 SQLite gem에 대해 생성하는 버그를 수정해야 합니다. 따라서 sqlite3 gem을 다음과 같이 변경합니다.

gem 'sqlite3', '~> 1.3.10'

이렇게 하면 CRUD 예제의 기본 데이터베이스로 SQLite를 사용할 것이기 때문에 데이터베이스 버전 관리와 관련된 일부 알려진 오류를 방지할 수 있습니다.

하지만 걱정하지 마십시오. 다른 데이터베이스에서는 이 문제가 발생하지 않습니다.

데이터베이스 구성

저는 일반적으로 기본 레이어에서 최상위 레이어로 빌드하는 것을 선호하므로 데이터베이스 모델 생성을 시작하겠습니다.

하나만 필요하므로 Rails 스캐폴딩보다 더 나은 명령 기능은 없습니다.

rails g scaffold Beer brand:string style:string country:string quantity:integer & rake db:migrate

이 모델은 매우 기본적이므로 진행하면서 다른 속성과 유형을 자유롭게 추가할 수 있습니다.

db/migrate 내 폴더에 "_create_beers.rb로 끝나는 이름을 가진 새 파일이 있습니다. ". 이것은 Rails가 맥주를 대표하기 위해 만든 레코드입니다.

그러면 모델이 app/models 아래에 생성됩니다. 폴더. 그대로 두고 다음 코드 줄을 db/seeds.rb에 추가합니다. 파일:

Beer.create(brand: 'Double Stout', style: 'Stout', country: 'England', quantity: 54)
Beer.create(brand: 'Spaten', style: 'Helles', country: 'Germany', quantity: 3)
Beer.create(brand: 'Newcastle', style: 'Brown ale', country: 'UK', quantity: 12)

이 파일은 앱이 시작될 때 데이터베이스에 대한 초기 데이터 로드를 저장합니다. 데이터베이스에 릴리스하려면 다음 명령을 실행하십시오.

rake db:seed

그게 다야! 이제 테이블에 맥주가 있습니다. .

웹패커 설정

Webpacker는 JavaScript 애플리케이션에 가장 널리 사용되는 정적 모듈 번들러 중 하나입니다. 그렇기 때문에 React 기능을 기존 애플리케이션에 통합하는 것이 완벽합니다.

Rails는 또한 Rails 내에서 JavaScript와 유사한 애플리케이션을 관리하도록 완전히 조정된 Webpacker 번들러를 제공합니다.

설치하려면 Gemfile에 두 번째 줄을 추가하세요. , 다음과 같이:

gem 'webpacker', '~> 4.3.x'

엄청난! 이것은 전체 앱 개발에 추가해야 할 유일한 보석입니다. 이는 이 기사의 뒷부분에서 설정될 Yarn에 전면적인 책임을 위임하기 때문에 가능합니다.

이제 다음 명령을 실행하여 업데이트를 설치할 차례입니다.

bundle install
bundle exec rake webpacker:install
bundle exec rake webpacker:install:react

첫 번째 것은 대부분의 Rails 개발자에게 잘 알려져 있습니다. Webpacker 자체를 포함하여 모든 종속 항목을 설치하기만 하면 됩니다.

Webpacker가 설치되면 Rake를 통해 명령을 에뮬레이트하여 Webpacker 종속성과 React 종속성을 설치할 수 있습니다.

이것은 Webpacker가 모든 JavaScript 종속성이 Rails 환경에 적절하게 설정되었는지 확인하는 곳이기 때문에 매우 중요한 단계입니다. 따라서 건너뛰거나 npm 또는 Yarn을 사용하는 것처럼 직접 실행하지 마십시오. 알겠습니다.

명령이 완료되면 몇 개의 폴더와 파일(예:node_modules 및 package.json )도 생성됩니다.

프런트엔드 설정

지금까지 만든 모든 설정은 CRUD 애플리케이션이 Rails에서만 작동하도록 하기에 충분합니다. rails s를 통해 Rails 서버를 시작하는 경우 명령을 실행하면 다음과 같은 결과가 나타납니다.

React on Rails:간단한 앱 빌드 Rails 자동 생성 맥주 CRUD.

그러나 우리는 React와 함께 우리 자신의 CRUD를 원합니다.

먼저 필요한 모든 프런트 엔드 종속성이 Yarn을 통해 구성되었는지 확인해야 합니다.

  • 반응
  • React 앱으로의 탐색을 처리하는 React Router
  • 바로 사용할 수 있는 React 구성 요소를 위한 Ant 디자인

Ant Design(antd라고 함)은 엔터프라이즈 수준 애플리케이션을 위한 풍부한 오픈 소스 라이브러리입니다. 웹 앱 개발을 단순화하는 고도로 사용자 정의 가능한 React 구성 요소를 제공합니다.

모든 것을 설치하려면 다음 명령을 실행하십시오.

yarn add antd react-router-dom

react를 명시적으로 추가할 필요가 없습니다. react-router-dom 이후의 라이브러리 할 것입니다.

이 시점에서 package.json을 열면 파일, 이것은 자동 생성된 콘텐츠가 됩니다:

{
  "dependencies": {
    "@babel/preset-react": "^7.12.1",
    "@rails/webpacker": "4.3.0",
    "antd": "^4.7.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "prop-types": "^15.7.2",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

이것이 Rails-React 콤보의 가장 기본적인 설정입니다. 따라서 코드를 계속 진행하는 것이 좋습니다.

레일 측면 조정

전면으로 진행하기 전에 Rails 측에서 몇 가지 중요한 작업을 처리해야 합니다.

먼저 페이지 리디렉션을 중앙 집중화할 컨트롤러를 정의해야 합니다. 단일 페이지 애플리케이션(SPA)을 생성하기 때문에 컨트롤러가 하나만 필요합니다. 컨트롤러는 이미 생성되어 있습니다:BeersController .

앱/컨트롤러 아래에서 엽니다. 폴더의 내용을 다음과 같이 변경합니다.

class BeersController < ApplicationController
  def index
  end
end

괜찮아요; 제거한 모든 코드는 생성될 다음 컨트롤러에 배치됩니다.

이 컨트롤러의 유일한 기능은 Rails에서 React로의 직접 경로를 제공하는 것이므로 index만 설정합니다. 방법.

직접 연결하려면 routes.rb를 엽니다. 구성 아래의 파일 폴더의 내용을 다음과 같이 변경합니다.

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

새 root를 확인하세요. 구성 예, 루트의 끝점을 beers에 매핑하고 있습니다. 색인 방법.

index.html.erb도 비워야 합니다. app/views/beers 내의 파일 Rails 웹 콘텐츠가 렌더링되는 것을 원하지 않기 때문에 폴더입니다. 이것은 Rails가 React 코드만 표시하도록 하는 데 사용할 수 있는 트릭입니다.

맥주 API

이제 Beer API 생성으로 넘어 갑시다. API 구조는 BeersController와 실질적으로 동일합니다. 그러나 약간의 변화가 있습니다. 생성하려면 다음 명령을 실행하십시오.

rails generate controller api/v1/Beers

버전 관리 시스템을 사용하여 생성해야 합니다. 이를 통해 향후 API를 발전시키고 일반 컨트롤러와 구별할 수 있습니다.

이제 app/controllers/api/v1/beers_controller.rb를 엽니다. 파일을 만들고 코드를 다음으로 바꿉니다.

class Api::V1::BeersController < ApplicationController
  before_action :set_beer, only: [:show, :edit, :update, :destroy]

  # GET /beers
  # GET /beers.json
  def index
    @beers = Beer.all.order(brand: :asc)
    render json: @beers
  end

  # GET /beers/1
  # GET /beers/1.json
  def show
    if @beer
      render json: @beer
    else
      render json: @beer.errors
    end
  end

  # GET /beers/new
  def new
    @beer = Beer.new
  end

  # GET /beers/1/edit
  def edit
  end

  # POST /beers
  # POST /beers.json
  def create
    @beer = Beer.new(beer_params)


    if @beer.save
      render json: @beer
    else
      render json: @beer.errors
    end
  end

  # PATCH/PUT /beers/1
  # PATCH/PUT /beers/1.json
  def update
  end

  # DELETE /beers/1
  # DELETE /beers/1.json
  def destroy
    @beer.destroy

    render json: { notice: 'Beer was successfully removed.' }
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_beer
      @beer = Beer.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def beer_params
      params.permit(:brand, :style, :country, :quantity)
    end
end

대부분의 작업은 이전 컨트롤러에서 재활용되었습니다.

before_action 스니펫은 id에 따라 적절한 맥주 객체를 복구합니다. 요청 내의 매개변수. :only 뒤에 배열에 배치된 작업만 절에 이 자동 복구 기능이 필요합니다.

나머지 방법은 각 CRUD의 작업과 동일합니다. JSON은 React 구성 요소 내에서 사용할 형식이기 때문에 항상 요청에 대한 응답으로 JSON을 반환하는 것을 기억하십시오.

마지막으로 config/routes.rb를 수정해야 합니다. 새로 생성된 경로를 다시 포함합니다. 따라서 파일 내용을 다음과 같이 변경해야 합니다.

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      get 'beers/index'
      post 'beers/create'
      delete 'beers/:id', to: 'beers#destroy'
    end
  end

  root 'beers#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

파괴 경로는 destroy에 매핑하는 방법을 보여줍니다. 경로에 명시적으로 설정되지 않은 경우 메서드입니다.

구성 요소 반응

React는 웹 애플리케이션의 빌딩 블록처럼 작동하는 구성 요소를 통해 작동합니다. 각각은 컨텍스트로 이해되는 하나 이상의 작업을 수행합니다.

간단히 말해서 구성 요소는 속성을 매개 변수로 수신하고 그 안의 비즈니스 로직을 처리하고 결국 화면의 일부를 나타내는 기능적 UI 구성 요소를 반환할 수 있는 JavaScript 클래스 또는 함수로 구성됩니다.

다음 예제에서 추출한 다음 코드 스니펫을 사용하세요.

<Layout>
  <Header />
  <Content>...</Content>
  <Footer>Honeybadger ©2020.</Footer>
</Layout>

예, React 구성 요소는 HTML과 매우 유사한 JSX(JavaScript XML)라는 사용자 지정 마크업 언어를 사용합니다. 모든 HTML 태그는 JSX 파일에서도 사용할 수 있습니다. 여기에서 JSX에 대한 자세한 내용을 읽을 수 있습니다.

위의 예는 antd가 구조적 레이아웃 구성 요소를 처리하는 방법을 보여줍니다. 구성 요소는 다른 구성 요소로 만들어지고 서로 겹쳐져 전체를 구성합니다. 일부는 속성을 수신하고(선택 사항이든 아니든) 일부는 내부 콘텐츠를 가질 수 있습니다.

구성 요소는 클래스 또는 함수 기반일 수 있습니다.

클래스 구성요소

클래스 기반 구성 요소는 아래와 같이 일반적인 JavaScript 클래스로 생성됩니다.

class Beers extends React.Component {}

React.Component에서 상속합니다. 클래스, 수명 주기, 초기화, 렌더링 및 소멸 단계 전에 코드를 실행하기 위한 활용 방법을 제공합니다.

그러나 가장 중요하고 필요한 메서드는 render()입니다. , 구성 요소가 업데이트될 때마다 호출됩니다.

기능 구성요소

기능적 구성 요소는 ES6의 화살표 기능을 사용하고 구문 및 복잡성 측면에서 React 구성 요소를 단순화합니다.

같은 Beer 위의 구성 요소는 다음과 같이 함수로 표현됩니다.

const Beers = () => <div>My Beers</div>;

훨씬 간단하죠?

리액트 설정

우리는 이미 Rails 인덱스 페이지를 비웠습니다. 이제 React를 기본 프론트 엔드로 만들어야 한다는 것을 Rails에 알릴 것입니다.

이를 달성하려면 &lt;head>에 다음 코드 줄을 추가해야 합니다. app/views/layouts/application.html.erb 태그 파일:

<%= javascript_pack_tag 'index' %>

그러면 애플리케이션 헤더에 JavaScript 팩이 추가되어 React 파일을 포함한 모든 JavaScript 파일이 색인 내에서 실행됩니다. 페이지.

index.jsx 파일은 가져오기 팩을 가리키므로 동일한 이름을 갖습니다.

이를 위해 자동 생성된 app/javascript/packs/hello_react.jsx의 이름을 변경하겠습니다. index.jsx에 파일 .

그런 다음 코드를 다음으로 바꿉니다.

import React from "react";
import { render } from "react-dom";
import App from "../components/App";

document.addEventListener("DOMContentLoaded", () => {
  render(<App />, document.body.appendChild(document.createElement("div")));
});

이 파일을 React 애플리케이션 파일로 착각하지 마세요. ReactDOM의 render를 통해 전체 React 앱 계층을 DOM에 로드하는 파일일 뿐입니다. 기능.

일반적으로 모든 React 애플리케이션은 index.js에서 시작합니다. React 자체를 포함하여 필요한 모든 것을 로드하는 파일입니다.

App 태그는 계층 구조의 최상위 구성 요소를 매핑합니다. index.jsx로 생성해 보겠습니다. 자바스크립트/구성요소 아래 폴더(아직 존재하지 않는 경우 폴더를 수동으로 생성)하고 다음 코드를 이 폴더에 넣습니다.

import React from "react";
import Routes from "../routes/index";
import "antd/dist/antd.css";

export default () => <>{Routes}</>;

또는 index.jsx 내에서 antd CSS 파일을 가져올 수 있습니다. . 두 가지 방법 모두 효과가 있습니다.

경로 목록은 경로 아래에 있습니다. 폴더. 그것들은 우리를 위해 대부분의 힘든 작업을 수행하는 React Router 라이브러리에서 추출됩니다. 내용은 다음과 같습니다.

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "../components/Home";

export default (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
    </Switch>
  </Router>
);

각 경로는 다른 Route 내에서 매핑되어야 합니다. 꼬리표. Route 매개변수는 각 경로 끝점의 URI와 일치해야 하며 component param은 React Router가 요청을 리디렉션해야 하는 구성 요소를 나타냅니다.

SPA에 대한 단일 경로가 있음을 기억하십시오. /beers를 매핑하려는 경우 여기에 다른 경로를 추가할 수도 있습니다. 예를 들어 맥주 목록에 대해 간단하게 설명하겠습니다.

또한 Home 아직 존재하지 않는 구성 요소입니다. Home.jsx로 생성해 보겠습니다. 구성요소 아래 폴더. 그런 다음 다음 코드를 추가합니다.

import { Layout } from "antd";
import React from "react";
import Beers from "./Beers";
import Header from "./Header";

const { Content, Footer } = Layout;

export default () => (
  <Layout className="layout">
    <Header />
    <Content style={{ padding: "0 50px" }}>
      <div className="site-layout-content" style={{ margin: "100px auto" }}>
        <h1>Beer Catalog</h1>
        <Beers />
      </div>
    </Content>
    <Footer style={{ textAlign: "center" }}>Honeybadger ©2020.</Footer>
  </Layout>
);

React 구성 요소에 관해서는 위에서 아래로 구성하는 것을 선호합니다. 이렇게 하면 앱이 전체적으로 작동하는 데 필요한 모든 구성 요소를 전체적으로 볼 수 있습니다.

Home 구성 요소는 어셈블러처럼 작동합니다. Layout과 같은 앱의 다른 모든 구성 요소를 수용합니다. , Header , Content, 및 Footer .

이러한 각 조각이 어디에서 오는지 적절하게 구별하는 것이 중요합니다. Antd는 Layout, Content, Footer와 같은 준비된 구성 요소를 제공하여 화면을 구성합니다.

주로 페이지 부분의 구조에 중점을 두고 있지만 일부는 내장 CSS 스타일도 제공하므로 더 나은 모습으로 도움이 됩니다.

헤더 구성요소

javascript/components 내에서도 생성되어야 하는 Header.jsx 구성요소 파일 폴더, 헤더의 내용을 유지합니다. 여기에는 아래와 같이 Honeybadger 로고가 있는 간단한 antd 메뉴와 div가 포함됩니다.

React on Rails:간단한 앱 빌드 Antd 메뉴 항목.

아래에서 Header.jsx에 배치할 코드를 찾을 수 있습니다. :

import React from "react";
import { Layout, Menu } from "antd";

const { Header } = Layout;

export default () => (
  <Header>
    <div className="logo" />
    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["1"]}>
      <Menu.Item key="1">Home</Menu.Item>
      <Menu.Item key="2">Our Services</Menu.Item>
      <Menu.Item key="3">Contact</Menu.Item>
    </Menu>
  </Header>
);

Antd 메뉴 구성 요소는 사용이 매우 간단하지만 사용 가능한 사용자 정의 옵션이 광범위하여 탐색 창, 드롭다운, 그룹 및 하위 그룹을 만들 수 있습니다.

defaultSelectedKeys를 제공하고 있습니다. , 활성화된 항목을 메뉴에 알려주는 배열입니다.

우리의 메뉴는 아무데도 이동하지 않습니다. 그들은 모양과 느낌만을 충족시키기 위해 화면을 차지할 것입니다. 그럼 Beer 구성 요소입니다.

맥주 구성요소

이 구성 요소는 맥주 목록과 삭제, 데이터 페이지 매김 및 테이블 다시 로드와 같은 테이블 내에서 사용할 수 있는 작업에 중점을 둡니다.

React on Rails:간단한 앱 빌드 React 작업 및 구성요소의 시각적 표현.

위의 이미지를 살펴보십시오. 구성 요소와 작업을 하위 수준으로 분류하여 여기에서 수행할 작업을 더 잘 이해할 수 있습니다.

반응 상태

React 구성 요소는 state로 빌드됩니다. 물체. 이 개체는 지정된 구성 요소에 직접 연결된 저장소 역할을 합니다. 각 구성 요소에는 고유한 state가 있습니다. 상태를 변경할 때마다 구성 요소가 다시 렌더링됩니다.

Beer의 첫 번째 작업 구성 요소는 테이블에 목록을 표시하는 것입니다. 이를 위해 이 목록을 배열에 보관해야 합니다.

state = {
  beers: [],
};

맥주 목록

이 배열을 제공하려면 이전에 만든 API 컨트롤러에서 목록을 검색해야 합니다. 검색할 함수를 검토합니다.

loadBeers = () => {
  const url = "api/v1/beers/index";
  fetch(url)
    .then((data) => {
      if (data.ok) {
        return data.json();
      }
      throw new Error("Network error.");
    })
    .then((data) => {
      data.forEach((beer) => {
        const newEl = {
          key: beer.id,
          id: beer.id,
          brand: beer.brand,
          style: beer.style,
          country: beer.country,
          quantity: beer.quantity,
        };

        this.setState((prevState) => ({
          beers: [...prevState.beers, newEl],
        }));
      });
    })
    .catch((err) => message.error("Error: " + err));
};

단순화를 위해 API에서 데이터를 요청해야 할 때마다 모든 최신 브라우저에서 사용할 수 있는 Fetch API를 사용할 것입니다.

위의 함수는 API에서 맥주 배열을 검색하기 위해 몇 가지 단계를 거칩니다.

  1. 먼저 /index를 요청합니다. 엔드포인트를 비동기식으로 then 응답 상태가 OK인지 확인합니다. .
  2. 그렇다면 데이터를 JSON으로 반환합니다. 그렇지 않으면 Error를 던지자 .
  3. Then , 결과 배열을 반복하여 자체 맥주 개체를 구성하고 주의 beers에 추가합니다. 배열.
  4. 프로세스 중에 문제가 발생하면 catch 블록은 예외를 캡처하여 메시지 경고로 표시합니다.

멋지지 않나요? 이는 다른 모든 요청에 ​​대해 수행할 단계와 거의 동일합니다.

그러나 antd는 테이블의 데이터를 어떻게 표시합니까? 좋은 질문! 다음 코드를 살펴보겠습니다.

columns = [
  {
    title: "Brand",
    dataIndex: "brand",
    key: "brand",
  },
  ...{
    title: "",
    key: "action",
    render: (_text, record) => (
      <Popconfirm title="Are you sure to delete this beer?" onConfirm={() => this.deleteBeer(record.id)} okText="Yes" cancelText="No">
        <a href="#" type="danger">
          Delete{" "}
        </a>
      </Popconfirm>
    ),
  },
];

이해를 돕기 위해 조금 단순화했습니다. 이것은 우리 테이블의 골격을 나타내는 배열입니다. 이것이 antd 테이블이 작동하는 방식입니다. 테이블 구조(행 및 열)에 대한 메타데이터 정보를 배열로 수신해야 합니다.

각 열은 배열 내의 객체이며 여기서 순서가 중요합니다. title 속성은 열의 이름을 받는 반면 dataIndex name은 React 컴포넌트 내에서 어떻게 알려질 것인지, key 고유 식별자입니다.

대부분의 열에서 구성은 작업 열을 제외하고 유사합니다. 거기에서 사용자가 항목을 삭제하려고 할 때 트리거할 작업 링크를 지정해야 합니다. 우리는 antd의 Popconfirm 구성 요소를 사용하고 있습니다.

사용자에게 작업이 발생하기 전에 확인하도록 프롬프트하는 작업을 용이하게 하는 매우 좋은 구성 요소입니다. 아래 이미지는 모양을 보여줍니다.

React on Rails:간단한 앱 빌드 삭제하기 전에 확인 대화 상자를 표시합니다.

작업 삭제

항목을 삭제하려면 API에 대한 삭제 호출과 테이블 다시 로드라는 두 가지 주요 작업을 수행해야 합니다.

삭제 기능은 우리가 만든 첫 번째 가져오기와 유사합니다.

deleteBeer = (id) => {
  const url = `api/v1/beers/${id}`;

  fetch(url, {
    method: "delete",
  })
    .then((data) => {
      if (data.ok) {
        this.reloadBeers();
        return data.json();
      }
      throw new Error("Network error.");
    })
    .catch((err) => message.error("Error: " + err));
};

보다? 여기서 새로운 것은 HTTP method뿐입니다. fetch의 두 번째 매개변수로 전달 방법. 또한 then 내에서 절에서 reloadBeers 다시 한 번 백엔드에서 모든 맥주를 다시 가져오는 기능입니다.

이 함수의 내용은 다음과 같습니다.

reloadBeers = () => {
  this.setState({ beers: [] });
  this.loadBeers();
};

주의 Beer를 재설정하고 있습니다. 배열 및 로드 함수를 다시 호출합니다.

최종 구성요소

마지막으로 antd 태그를 명시적으로 호출하여 구성 요소를 구성해야 합니다. 최종 구성 요소 코드와 함께 어떻게 진행되는지 살펴보겠습니다.

import { Table, message, Popconfirm } from "antd";
import React from "react";
import AddBeerModal from "./AddBeerModal";

class Beers extends React.Component {
  columns = [
    {
      title: "Brand",
      dataIndex: "brand",
      key: "brand",
    },
    {
      title: "Style",
      dataIndex: "style",
      key: "style",
    },
    {
      title: "Country",
      dataIndex: "country",
      key: "country",
    },
    {
      title: "Quantity",
      dataIndex: "quantity",
      key: "quantity",
    },
    {
      title: "",
      key: "action",
      render: (_text, record) => (
        <Popconfirm title="Are you sure to delete this beer?" onConfirm={() => this.deleteBeer(record.id)} okText="Yes" cancelText="No">
          <a href="#" type="danger">
            Delete{" "}
          </a>
        </Popconfirm>
      ),
    },
  ];

  state = {
    beers: [],
  };

  componentDidMount() {
    this.loadBeers();
  }

  loadBeers = () => {
    const url = "api/v1/beers/index";
    fetch(url)
      .then((data) => {
        if (data.ok) {
          return data.json();
        }
        throw new Error("Network error.");
      })
      .then((data) => {
        data.forEach((beer) => {
          const newEl = {
            key: beer.id,
            id: beer.id,
            brand: beer.brand,
            style: beer.style,
            country: beer.country,
            quantity: beer.quantity,
          };

          this.setState((prevState) => ({
            beers: [...prevState.beers, newEl],
          }));
        });
      })
      .catch((err) => message.error("Error: " + err));
  };

  reloadBeers = () => {
    this.setState({ beers: [] });
    this.loadBeers();
  };

  deleteBeer = (id) => {
    const url = `api/v1/beers/${id}`;

    fetch(url, {
      method: "delete",
    })
      .then((data) => {
        if (data.ok) {
          this.reloadBeers();
          return data.json();
        }
        throw new Error("Network error.");
      })
      .catch((err) => message.error("Error: " + err));
  };

  render() {
    return (
      <>
        <Table className="table-striped-rows" dataSource={this.state.beers} columns={this.columns} pagination={{ pageSize: 5 }} />

        <AddBeerModal reloadBeers={this.reloadBeers} />
      </>
    );
  }
}

export default Beers;

이제 모든 것을 함께 볼 수 있습니다. render 함수는 우리가 거기에서 가져오는 두 개의 태그를 표시할 것입니다:antd의 Table 구성 요소 및 AddBeerModal (몇 분 안에 생성할 모달 양식).

테이블 구성 요소는 pagination을 설정하여 결과를 자동으로 페이지 매김할 수 있도록 하는 방식이 매우 풍부합니다. 물체. 여기에 추가하는 유일한 속성은 각 페이지의 크기입니다(페이지당 5개의 결과).

dataSource 속성은 백엔드에서 마운트한 맥주 목록과 columns을 받습니다. 속성은 이미 구축한 메타데이터를 수신합니다.

AddBeerModal 구성요소

테이블 아래에 새 맥주를 추가할 수 있는 버튼이 있습니다. 이 버튼을 클릭하면 아래에서 볼 수 있는 것처럼 새 맥주를 카탈로그에 등록하는 양식이 있는 모달이 열립니다.

React on Rails:간단한 앱 빌드 카탈로그에 새 맥주 추가

이것은 antd가 양식을 처리하는 방법을 탐색하는 좋은 방법입니다.

먼저 이 구성 요소에서 수행할 작업을 분석해 보겠습니다. 구성 요소 자체는 Button과 Modal의 두 가지로 구성됩니다.

즉, 두 작업과 관련된 작업을 매핑해야 합니다.

  • showModal 및 handleCancel 모달의 개폐를 처리합니다.
  • onFinish 양식을 제출할 때 트리거됩니다.

모달 토글(즉, 표시 여부)만 저장하는 구성 요소의 상태로 재생됩니다.

state = {
  visible: false,
};

모달을 표시하거나 숨기려면 이 부울을 전환하기만 하면 됩니다.

this.setState({
  visible: true,
});

Beer의 API를 호출하고 새 맥주를 등록하려면 Fetch API를 다시 사용해야 합니다.

onFinish = (values) => {
  const url = "api/v1/beers/";
  fetch(url, {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(values),
  })
    .then((data) => {
      if (data.ok) {
        this.handleCancel();

        return data.json();
      }
      throw new Error("Network error.");
    })
    .then(() => {
      this.props.reloadBeers();
    })
    .catch((err) => console.error("Error: " + err));
};

서버에 데이터를 보내는 요청을 호출하는 것은 이번이 처음입니다. 이 경우 어떤 유형의 정보가 향하고 있는지 API에 명시적으로 알려야 합니다. 이것이 Header가 속성을 알려야 합니다.

모든 것이 잘되면 모달을 닫고 테이블 목록을 다시 로드합니다.

이제 구성 요소 렌더링과 함께 모든 것을 함께 보겠습니다.

import { Button, Form, Input, Modal, Select } from "antd";
import React from "react";

const { Option } = Select;

class AddBeerModal extends React.Component {
  formRef = React.createRef();
  state = {
    visible: false,
  };

  onFinish = (values) => {
    const url = "api/v1/beers/";
    fetch(url, {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(values),
    })
      .then((data) => {
        if (data.ok) {
          this.handleCancel();

          return data.json();
        }
        throw new Error("Network error.");
      })
      .then(() => {
        this.props.reloadBeers();
      })
      .catch((err) => console.error("Error: " + err));
  };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          Create New +
        </Button>

        <Modal title="Add New Beer ..." visible={this.state.visible} onCancel={this.handleCancel} footer={null}>
          <Form ref={this.formRef} layout="vertical" onFinish={this.onFinish}>
            <Form.Item name="brand" label="Brand" rules={[{ required: true, message: "Please input your beer brand!" }]}>
              <Input placeholder="Input your beer brand" />
            </Form.Item>

            <Form.Item name="style" label="Style" rules={[{ required: true, message: "Please input your beer style!" }]}>
              <Input placeholder="Input your beer style" />
            </Form.Item>

            <Form.Item
              name="country"
              label="Country"
              rules={[
                {
                  required: true,
                  message: "Please input the country of the beer!",
                },
              ]}
            >
              <Select showSearch placeholder="Select your beer country" optionFilterProp="children" style={{ width: "100%" }}>
                <Option value="Finland">Finland</Option>
                <Option value="Germany">Germany</Option>
                <Option value="Netherlands">Netherlands</Option>
                <Option value="UK">UK</Option>
                <Option value="USA">USA</Option>
                <Option value="Other">Other</Option>
              </Select>
            </Form.Item>

            <Form.Item name="quantity" label="Quantity" rules={[{ required: true, message: "Please input the quantity!" }]}>
              <Input type="number" placeholder="How many beers you desire?" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </>
    );
  }
}

export default AddBeerModal;

Antd allows us to specify each form’s item rules individually. If a field is required, just say so by providing a rules attribute. You can customize the message it’ll display in case the user submits the form without filling it properly:

React on Rails:간단한 앱 빌드 Validating form inputs.

Take a look at the Select component, which translates a combo box. See how easy it is to create complex components by just providing the right attributes. For example, if you want to make your select searchable, just put the showSearch property, there and it’s done:

React on Rails:간단한 앱 빌드 Filtering results within a Select.

Antd will automatically filter the select options based on your input.

Styling

Sometimes, you’ll need to provide some CSS styling to components that do not provide a default (like antd’s table) or customize the ones that come built-in.

To do this, you can create as many CSS files as you want and organize them in a structure that pleases you. Rails already create an application.css file, under the app/assets/stylesheets folder. Open it and the following content:

.site-layout-content {
  background: #fff;
  padding: 24px;
  min-height: 380px;
}

.logo {
  width: 200px;
  min-height: 31px;
  margin: 16px 24px 16px 0;
  float: left;
  background-image: url(https://www.honeybadger.io/images/navbar_logo.svg?1602785015);
  background-repeat: no-repeat;
}

.table-striped-rows th,
.table-striped-rows td {
  border-bottom: 1px solid #dedddd !important;
}

.table-striped-rows tr:nth-child(2n) td {
  background-color: #fbfbfb;
}

.table-striped-rows thead {
  background-color: #f1f1f1;
}

Those are the CSS rules to make our table stripped, for example. Feel free to add as many extra styles here as you want.

테스트

Before heading to the tests, we need to disable the CSRF token checking that Rails automatically configures for our apps. To do so, go to the app/controllers/application_controller.rb file and change it to the following:

class ApplicationController < ActionController::Base
  protect_from_forgery with: :null_session
end

This way, we avoid having to validate the tokens each time we perform a request.

엄청난! Now, start your server via rails s command, access the https://localhost:3000/ address, and play around with the CRUD.

결론

As a homework task, I’d recommend that you try implementing the update functionality of the CRUD. You can adapt the edit method at the API controller to receive the updated beer info and perform the update to the database. For the view, another modal would suit very well to accommodate the edit’s form.

You can also find the source code for this tutorial here. Good studies!