[React] 웹에서 flask 서버로 통신해 검색 기능 구현하기

Postman에서 영화 검색 API 개발 후 Docker Image로 배포해놨던 flask 서버에

웹으로 데이터 요청과 응답을 받아보려고 한다.

---

코드

import { useState } from 'react';
import axios from 'axios';

function App() {
  let [search, setSearch] = useState(""); 

  function func(){
    axios.post(`https://도메인주소/movie?keyword=${search}&offset=0&limit=25`)
    .then((res) => {
      console.log(res.data);
    })
    .catch((e) => {
      console.log(e);
    })
  }

  return (
    <div>
      <input onChange={(e) => setSearch(e.target.value)}/>
      <button onClick={() => func()}>버튼</button>
    </div>
  );
}

export default App;

사용자가 input 태그에 입력 후 버튼을 누르면 내가 배포한 서버에 요청이 간다.

 

결과

movie를 검색 했을 때 영화 제목에 movie가 포함된 데이터들과 총 개수이다.