[React] Api 호출
이번 포스팅에서는 React에서의 api 호출에 대해 설명하려 합니다.
REST API란?
HTTP method를 통해 서버와 클라이언트의 통신을 할 경우에 사용해서 상대가 어떤 통신을 요청하는지, 그리고 내가 어떤 통신을 요청해야 하는지 정할 수 있는 방식
기본적으로 BackEnd와 FrontEnd는 서버를 따로 관리하기 때문에 rest api를 통해 데이터를 주고 받았다.
- BackEnd (Spring)
데이터 값을 REST API 방식을 통해 url로 뿌린다.
- FrontEnd (React)
뿌려진 url에 원하는 요청(request)을 보내서,
그에 맞는 결과 값은 응답(Response)을 받는다.
서버와 통신하기 위해 사용하는 방법은 fetch와 axios 두 가지가 있다. 기능적으로는 동일하지만, 사용하는 방식이 다르다. 이번에는 axios를 사용하였다.
$npm install axios
이미지 업로드를 위한 서비스
upload-files.service.js
flask에서 예측한 결과값을 json데이터로 받았다.
> 프로젝트 구조 참고
class UploadFilesService {
async upload(file, onUploadProgress) {
let formData = new FormData();
formData.append("file", file)
const returnJSON = axios.post("/uploadFile", formData, {
headers: {
"Content-Type": "multipart/form-data"
},
onUploadProgress,
});
return JSON.parse((await returnJSON).data.predictinfo)
}
async getFiles() {
return http.get("/uploadFile");
}
}
export default new UploadFilesService();
- 내부 upload()메서드에서는 FormData키-값 쌍을 저장 하는 데 사용합니다. append()메서드를 사용하여 HTML 형식에 해당하는 객체를 만드는 데 도움이 됩니다.
이렇게 Rest API를 가지고 Flask에서 예측한 결과값과 Spring에 연결한 DB의 정보와 일치하는 데이터값을 불러올 수 있다.
Author And Source
이 문제에 관하여([React] Api 호출), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cksl0830/React-Api-호출저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)