REACT AXIOS POST ERROR - 500

ERROR ⛔

프론트엔드에서 axios.post 로 data 를 백엔드로 보내고 백엔드는 DB로 보내려고 할 때, data 도 들어간 것 같고 백엔드 메서드도 반응을 하는데 not null property 에러가 나온다?

CODE

// Front
const [userId, setUserId] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");

function userSignIn(){
  axios.post('http://localhost:8080/join',
             data:{
               userId:userId,
               password:password,
               email:email
             })
    .catch(function(error) {
    console.log("실패");
    console.log(error);
    console.log(user);
  });
}

<input className="registerInput" type="text" placeholder="Enter your username" onChange={(e)=>{setUserId(e.target.value);}}/>
<input className="registerInput" type="email" placeholder="Enter your email" onChange={(e)=>{setEmail(e.target.value);}} />
<input className="registerInput" type="password" placeholder="Enter your password" onChange={(e)=>{setPassword(e.target.value);}}/>
<button type="button" className="registerButton" onClick={()=>userSignIn()}>Register</button>

// Back
@PostMapping("/join")
public String signUp(@RequestBody User user){
    System.out.println(user);
    userService.회원가입(user);
    return "회원가입이 완료되었습니다.";
}

어제 axios 로 get 을 사용해 데이터가 잘 이동하는 것을 봤다.
이번엔 user 회원가입을 본격적으로 해보려고, post 를 사용했다.

왜 안 돼?

1. 웹 페이지에서 500 에러라고 콘솔에 표시된다. error 메세지가 나온 후 입력된 user는 제대로 콘솔에 표시가 된다!
2. 인텔리제이(백엔드)의 콘솔에는 user 가 나온 뒤 not null 에러가 나온다.
3. 그런데 user의 모든 값이 null 이다.
4. 그래서 not null 에러가 계속 나온 것.

그런데 왜 그러는 거지?

해결 ✅

data: 를 지운다.

axios.post('http://localhost:8080/join',
             data:{
               userId:userId,
               password:password,
               email:email
             })
    .catch(function(error) {
    console.log("실패");
    console.log(error);
    console.log(user);
  });

❌

axios.post('http://localhost:8080/join',
             {
               userId:userId,
               password:password,
               email:email
             })
    .catch(function(error) {
    console.log("실패");
    console.log(error);
    console.log(user);
  });

⭕

너무 쉬운 건데, 내가 문법을 놓치고 있었던 걸까..

axios 의 post 와 get 은 문법이 약간 다른가.

---

참고 : react-axios-http-post-request-examples