react 공부를 시작했는데 post 요청 후 리스폰 되는 데이터에 대해 질문이 있습니다.

Question

import { useState } from "react"; import axios from "axios"; export default function SignUpModal() { const [id, setId] = useState(""); const [pw, setPw] = useState(""); const [cpw, setCpw] = useState(""); const [isOpen, setIsOpen] = useState(false); const closeModal = () => { setIsOpen(false); }; const onIdHandler = (event) => { setId(event.currentTarget.value); }; const onPwHandler = (event) => { setPw(event.currentTarget.value); }; const onCpwHandler = (event) => { setCpw(event.currentTarget.value); }; // axios const onSubmitForm = (event) => { event.preventDefault(); if (pw !== cpw) { return alert("비밀번호와 비밀번호 확인이 같지 않습니다."); } if (pw.length < 8) { return alert("비밀번호는 8자 이상이어야 합니다."); } axios({ method: "POST", url: "http://127.0.0.1:8000/accounts/signup/", data: { username: id, password1: pw, password2: cpw, }, }) .then((response) => { console.log(response); // 서버 응답 데이터 출력 }) .catch((error) => { console.log(error); // 에러 처리 }); }; return (

회원가입

); } 안녕하세요.react 공부 1주일차인데, 회원가입 기능을 구현하려다 문제가 생겨 질문드립니다.회원가입시 DB에 값이 정상적으로 저장이 되는데 console.log(response)를 하면 data부분이 빈값입니다. 여기저기 찾아봤는데 해결을 못하고 있습니다 ㅠㅠ...

나니야 · Answer

1주일 매달려보세요

Gear · Answer

그러면 프론트 부분을 볼게 아니라 API 서버를 살펴보세요.postman 이용하면 테스트하기 편하니 postman 이용 해보시고요P.S. 굳이 type이 submit인 input에서 event.preventDefault 호출하지 마시고...type을 button으로 바꾸든가, 차라리 onSubmitForm 함수를 form의 onSubmit에 넣으시길 추천합니다.일부러 type을 submit으로 지정해서 submit을 기본 동작으로 지정해 놓고 그걸 또 막아버리는 건 불필요한 행위라고 생각되네요.

react 공부를 시작했는데 post 요청 후 리스폰 되는 데이터에 대해 질문이 있습니다.

2개의 답변

Q&A 목록