React (리액트) 와 gRPC-Web : PART 2 : gRPC-Web 서버로 부터 데이터 받기

이번 글에서는 리액트로 gRPC-Web 서버에서 데이터 가져오기를 해 보겠습니다. 저번 글에서 생성된 두 개의 컴필레이션 파일을 이용하여 gRPC-Web 서버나 프락시에서 데이터를 가지고 와 보겠습니다.

---

1. Prerequisites (준비사항)

---

a. 리액트 프로젝트 및 .proto 파일과 컴파일된 두 개의 자바스크립트 파일

아래의 파일들로 이 글을 작성해 보겠습니다. 이 예제에선 아래 세 가지 파일들은 모두 src/protos 폴더에 위치해 있습니다.

• greet.proto
• greet_grpc_web_pb.js
• greet_pb.js

b. gRPC-Web 서버나 프락시

위의 파일들은 greeter 서비스를 이용하므로 서버에서도 같은 서비스가 노출이 되어 있어야겠죠? 사용하시는 서비스를 서버와 클라이언트에 맞게 준비하여 주세요.
 

반응형

---

2. 코드

---

이 글의 목적은 클라이언트 세팅이므로 서버 부분은 생략하도록 하겠습니다. 예제로서 이글에선 hello.jsx 파일을 완성해보겠습니다.

---

a. 우선 Client, Service Request, Service Response 세 가지를 정의합니다.

const { GreeterClient } = require('../protos/greet_grpc_web_pb');
const { HelloRequest, HelloReply } = require('../protos/greet_pb.js');

{ } 안의 이름은 임의가 아닙니다. 각 컴필레이션 파일들을 열어보면 이 이름으로 정의되어있습니다.

---

greet_grpc_web_pb.js
GreeterClient 정의

proto.greet.GreeterClient =
    function(hostname, credentials, options) {
  if (!options) options = {};
  options.format = 'text';

  /**
   * @private @const {!grpc.web.GrpcWebClientBase} The client
   */
  this.client_ = new grpc.web.GrpcWebClientBase(options);

  /**
   * @private @const {string} The hostname
   */
  this.hostname_ = hostname.replace(/\/+$/, '');

};

---

greet_pb.js
HelloRequest와 HellpReply의 정의

proto.greet.HelloRequest = function(opt_data) {
  jspb.Message.initialize(this, opt_data, 0, -1, null, null);
};

proto.greet.HelloReply = function(opt_data) {
  jspb.Message.initialize(this, opt_data, 0, -1, null, null);
};

---

b. GreeterClient를 생성합니다

var client = new GreeterClient('gRPC-Web 서버 URL', null, null);

---

c. 서비스 호출 컨스턴트의 정의

서비스를 호출하여 돌아오는 값을 txtTitle에 넣습니다

const callGrpcService = () => {
    const request = new HelloRequest();
    request.setName('Frank');

    client.sayHello(request, {"Access-Control-Allow-Origin": "*"}, (err, response) => {
        if (response == null) {
            document.getElementById('txtTitle').innerText = err;
        } else {
            document.getElementById('txtTitle').innerText = response.getMessage();
        }
    });
};

여기에서 setName, getMessage는 greet_pb.js 파일 내 정의 (아래 코드블록 참조)가 되어 있습니다

proto.greet.HelloRequest.prototype.setName = function(value) {
  return jspb.Message.setProto3StringField(this, 1, value);
};

proto.greet.HelloReply.prototype.getMessage = function() {
  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 1, ""));
};

---

d. 페이지 컴포넌트

h1과 button을 넣습니다. button을 누르면 서비스를 호출하여 h1을 업데이트하는 방식입니다

return (
    <div>
        <h1 id="txtTitle" ></h1>
        <button style={{padding:10}} onClick={callGrpcService}>Click for grpc request</button>
    </div>
)

728x90

---

아래의 코드블록이 hello.jsx 컴포넌트의 완전체입니다.

import React, { Component } from 'react';

export default function Hello() {
    const { GreeterClient } = require('../protos/greet_grpc_web_pb');
    const { HelloRequest, HelloReply } = require('../protos/greet_pb.js');
    
    var client = new GreeterClient('gRPC-Web 서버 URL', null, null);

    const callGrpcService = () => {
        const request = new HelloRequest();
        request.setName('Frank');

        client.sayHello(request, {"Access-Control-Allow-Origin": "*"}, (err, response) => {
            if (response == null) {
                document.getElementById('txtTitle').innerText = err;
            } else {
                document.getElementById('txtTitle').innerText = response.getMessage();
            }
        });
    };

    return (
        <div>
            <h1 id="txtTitle" ></h1>
            <button style={{padding:10}} onClick={callGrpcService}>Click for grpc request</button>
        </div>
    )
}

---

수고하셨습니다~

감사합니다

---

도움이 되셨다면 아래의 ❤️공감버튼이나 구독버튼을 눌러 주세요~  감사합니다