React
[React] 웹에서 flask 서버로 통신해 검색 기능 구현하기
dong_su
2023. 12. 23. 17:19
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가 포함된 데이터들과 총 개수이다.