이번 글에서는 리액트로 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 세 가지를 정의합니다.
{ } 안의 이름은 임의가 아닙니다. 각 컴필레이션 파일들을 열어보면 이 이름으로 정의되어있습니다.
greet_grpc_web_pb.js GreeterClient 정의
greet_pb.js HelloRequest와 HellpReply의 정의
b. GreeterClient를 생성합니다
c. 서비스 호출 컨스턴트의 정의
서비스를 호출하여 돌아오는 값을 txtTitle에 넣습니다
여기에서 setName, getMessage는 greet_pb.js 파일 내 정의 (아래 코드블록 참조)가 되어 있습니다
d. 페이지 컴포넌트
h1과 button을 넣습니다. button을 누르면 서비스를 호출하여 h1을 업데이트하는 방식입니다
아래의 코드블록이 hello.jsx 컴포넌트의 완전체입니다.
수고하셨습니다~ 감사합니다
