Form을 만들었으니 이제 작동할 수 있도록 만들어 보겠습니다.
Front-end와 Back-end간에 통신이 이루어지도록 하는 것은 그리 어렵지 않으면서도 세심함을 요하는 작업입니다. 주소가 틀리거나, 주고 받을 데이터의 형식이 다르거나, 전송 속도와 앱의 실행 속도 간에 발생하는 시간 차이를 고려해야 합니다. 일단 이 포스팅에서는 그런 모든 복잡한 것을 뒤로 하고 단순히 데이터 통신에만 집중해보도록 하겠습니다.
React에서 fetch로 요청 보내기
이전에 작성했던 /client/src/pages/Login.js 파일의 handleSubmit함수에 fetch관련 내용을 추가해줍니다.
const handleSubmit = (e) => {
const requestOptions = {
// 데이터 통신의 방법과 보낼 데이터의 종류, 데이터를 설정합니다.
method: "POST", // POST는 서버로 요청을 보내서 응답을 받고, GET은 서버로부터 응답만 받습니다.
headers: {
"Content-Type": "application/json",
}, // json형태의 데이터를 서버로 보냅니다.
body: JSON.stringify({
// 이 body에 해당하는 데이터를 서버가 받아서 처리합니다.
phone: phone,
purpose: purpose,
}),
};
console.log(requestOptions);
fetch("/api/info_check", requestOptions)
.then((res) => res.json()) // Result를 JSON으로 받습니다.
.then((res) => {
console.log(res); // 결과를 console창에 표시합니다.
});
};React가 보내온 요청을 Express가 처리하도록 하기
React가 /api/info_check경로로 요청을 보냈으니 이 주소에 Express 라우트를 추가하여 데이터를 처리할 수 있도록 해 보겠습니다.
app.use("/api/info_check", function (req, res, next) {
console.log(req); // 받아온 데이터를 콘솔창에 표시합니다. 이 내용은 npm run dev를 입력한 콘솔에 표시됩니다.
res.json({ code: "200", message: "success!" }); // React에 응답으로서 데이터를 보냅니다. 데이터는 단순 응답 코드, json 등 다양한 형식을 사용할 수 있습니다.
});
Done!
여기까지 하셨다면 좋습니다. 이제 값을 입력한 후 submit 버튼을 누르면 Express에 폼 데이터를 보낸후 응답값을 받아오는 것을 확인할 수 있습니다.
긴 글 읽어주셔서 감사합니다. 도움이 되셨다면 좋아요 + 광고 클릭 부탁드립니다. 고마움을 표현하는 가장 쉬운 방법입니다.
반응형
