[React] Api 호출

이번 포스팅에서는 React에서의 api 호출에 대해 설명하려 합니다.

REST API란?

HTTP method를 통해 서버와 클라이언트의 통신을 할 경우에 사용해서 상대가 어떤 통신을 요청하는지, 그리고 내가 어떤 통신을 요청해야 하는지 정할 수 있는 방식

기본적으로 BackEnd와 FrontEnd는 서버를 따로 관리하기 때문에 rest api를 통해 데이터를 주고 받았다.

1. BackEnd (Spring)
   데이터 값을 REST API 방식을 통해 url로 뿌린다.

2. 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의 정보와 일치하는 데이터값을 불러올 수 있다.