react - login axios 로그인 기능 구현하기 - 400 error & useState({}) useState에 obj타입을 적용하여 여러개의 프로퍼티 사용

로그인 기능을 구현하기 전, axios기능을 위해 미리 다른 파일로 작성하고, url도 다른 파일에 작성하여 import해서 사용하도록 변경해놓았다.
그리고 순조롭게 ^^ 코드를 작성하던 중!
서버에서 데이터를 받아온 후 console.log로 찍어달라는 코드를 작성했을 때!! 400 에러가 확인되었다.

검색해보니 원인은 다양했고, 코드를 고쳐도 400에러는 해결되지 않았음.
당연함..
콘솔 보면 바로 원인 아실지도.. 근데 고치기 전까진 아예 생각도 못했다..!

login.jsx

import { axiosLogin } from "../service/axios";
import { loginUrl } from "../service/url";

function Login() {
  const [login, setlogin] = useState({ userid: "", passwd: "" });
  function onChange(e) {
    setlogin({ ...login, [e.target.id]: [e.target.value] });
  }
  const fnLogin = (e) => {
    e.preventDefault();
    if (login.userid === "" || login.passwd === "") {
      return console.log("빈칸이다");
    }
    axiosLogin(loginUrl, login);
  };
  return (
    <div id="wrap">
      <section className="mainWrap loginWrap">
        <h3 className="blind">login</h3>
        <div className="loginBox commonBox">
          <h3>login</h3>
          <form className="loginForm" onSubmit={fnLogin}>
            <input
              type="text"
              name="user_id"
              id="userid"
              placeholder="아이디를 입력해 주세요."
              onChange={onChange}
            />
            <label htmlFor="userid" className="blind userIdLabel">
              아이디를 입력해 주세요.
            </label>
            <input
              type="password"
              name="pass_wd"
              id="passwd"
              placeholder="비밀번호를 입력해 주세요."
              onChange={onChange}
            />

axiosData

export function loginEvent(loginUrl, userData) {
  return axios({
    method: "POST",
    url: loginUrl,
    data: {
      userid: userData.userid[0],
      passwd: userData.passwd[0],
    },
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((res) => {
      if (res.data.status === "fail") {
        alert("회원가입을 먼저 진행해 주세요.");
        return;
      }
      if (res.data.status === "success") {
        const accessToken = res.data.data.jtoken;
        setStorage(ISLOGIN, `${accessToken}`);
        window.location.href = `${process.env.PUBLIC_URL}/`;
        return console.log(accessToken);
      }
    })
    .catch((error) => console.log(error.response));
}

코드를 이런식으로 작성했는데.
구글링해서 본 코드들은 아이디와 비밀번호의 useState를 따로 작성했고, 그게 더 간단해 보였음!
내가 미리 예제로 본 코드에선 하나에 obj형태로 작성을 했기 때문에 이렇게 작성하겠다고 찾았게 내 오류의 시작이었다.

일단!!

  const [login, setlogin] = useState({ userid: "", passwd: "" });
  function onChange(e) {
    setlogin({ ...login, [e.target.id]: [e.target.value] });
  }

obj타입이 아닌, 하나의 값만이 적용된 useState로 작성했다면 위 같이 작성할 필요 없이 바로 작성하여 여러개의 onChange를 작성하면 됨!
하지만 나는 obj타입을 사용하여 useState를 하나만 사용할 것이기 때문에 위와 같이 작성하였음.
또한 useState의 login의 값은

의 콘솔과 같이 표시되므로,

    data: {
      userid: userData.userid[0],
      passwd: userData.passwd[0],
    },

userid의 첫번째 배열을 userid의 값으로 사용하겠다고 적어줘야 한다. (내가 400 에러가 나온 이유!!)