[rust+react] 7. Rust 그리고 React / 2

성욱김·2022년 2월 15일

1. 설계

간단하게 응답과 요청을 처리할 수 있는 서버를 만들어보자.

Info 버튼을 통해 유저 정보를 받아오고 화면에 출력
(이름 , 전화번호 , 나이 )

그 중 이름을 클릭하면 상세정보 페이지로 이동

main.rs

use actix_web::{get,web, App, HttpServer, Responder,Result, HttpResponse,HttpRequest};
use serde::Serialize;
use actix_cors::Cors;

#[derive(Serialize)]
struct MyObj {
    name: String,
    phone: usize,
    age: usize,
}

#[derive(Serialize)]
struct detailObj {
    info: String,
    money: usize,
    married: bool,
}

#[get("/")]
async fn index() -> Result<impl Responder>{
    let obj = MyObj {
        name : "KSW".to_string(),
        phone : 33231052,
        age : 17,
    };
    Ok(web::Json(obj))
}

#[get("/detail/{name}")]
async fn detail(req: HttpRequest) -> Result<impl Responder>{
    println!("{:?}",req);
    let detail_obj = detailObj {
        info :  "He is good people".to_string(),
        money : 100000000,
        married : false,
    };
    Ok(web::Json(detail_obj))
}

#[actix_web::main]
async fn main() -> std::io::Result<()>{
    HttpServer::new(||{
        let cors = Cors::default()
        .allowed_origin("http://localhost:3000")
        .allowed_methods(vec!["POST", "PUT", "PATCH", "GET", "OPTIONS", "HEAD"]);

    
        App::new()
        .wrap(cors)
        .service(index)
        .service(detail)
        
        
    })
    .bind("127.0.0.1:8000")?
    .run()
    .await
}

app.js

import React ,{useState, useEffect} from 'react';
import Home from './Home';
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";
import Detail from './Detail';
function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>}></Route>
        <Route path="/info/:name" element={<Detail/>}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.js

import React ,{useState, useEffect} from 'react';
import {Link} from "react-router-dom";

function Home() {
    const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const getData = async() => {
    const json = await ( await fetch(
  "http://127.0.0.1:8000/")).json();
  console.log(json);
  setData(json);
  setLoading(false);
};


  return (
    <div>
      <button onClick={getData}>UserInfo</button>
        {loading? null : 
        <div>
          <h1>Information</h1>
          <p>이름 : <Link to={`/info/${data.name}`}>{data.name}</Link></p>
          <p>전화번호 : 010{data.phone}</p>
          <p> 나이 : {data.age}</p>
        </div>
        }
    </div>
  );
}

export default Home;

Detail.js

import React ,{useState,useEffect } from 'react';
import {useParams} from "react-router-dom";

function Detail(){
    const name = useParams();
    const [detail,setDetail] = useState([]);
    const getDetail  = async() => {
        const json = await ( await fetch(`http://127.0.0.1:8000/detail/${name}`)).json()
        setDetail(json);
    }

    useEffect(()=>{
        getDetail();
    },[])
    return (
        <div>
            <h1>Detail information of The man</h1>
            <p>info : {detail.info}</p>
            <p>money : {detail.money}</p>
            <p>married : {detail.married ? "Yes" : "No"}</p>
        </div>
    )
}

export default Detail;

그러나 아직 문제가 존재한다.

2. 문제점 해결

/info/qqq?

qqq라는 사람에 대한 정보는 없지만, 이런식으로 KSW의 정보를 주게 된다.

React는 잘못이 없다.

await fetch(`http://127.0.0.1:8000/detail/${name}`)

/detail/qqq를 제대로 요청했기 때문이다.

그렇다면 Rust에서 /detail/qqq 요청을 잘못 처리하고 있다는 뜻이다.

따라서 Rust부분을 수정해 주자.

정보가 없는 사람을 요청할 경우 No Information 반환

main.rs

#[get("/detail/{name}")]
async fn detail(req: HttpRequest) -> Result<impl Responder> {
    let mut obj = detailObj{
        info: "No information".to_string(),
        money: 0,
        married: false,
    };
    let user_list:[&str; 5] = ["KSW","ME","YOU","THEM","US"];
    
    let user_name : String = req.match_info().get("name").unwrap().parse().unwrap();
    println!("{}",user_name);
    for item in &user_list{
        if user_name==item.to_string() {
            obj.info = format!("{} is good man" , user_name);
            obj.money = 1000;
            obj.married = false;
        }
    }
    Ok(web::Json(obj))
}