axios.post()에서 여러 개 데이터를 보내야 할 때

react-hook-form을 활용하면서 추가적으로 데이터를 집어넣어야 할 때 어떤 방식으로 데이터를 넣는지에 대한 포스팅을 하겠습니다.

 

 

📌 axios 문법 구성

axios.post([URL], {body})
  .then(response => { console.log('성공적으로 연결 되었을 때'); })
  .catch(error => { console.log('연결을 실패해서 오류가 발생했을 때'); })

1. URL: 연결할 서버 URL을 적어주면 됩니다. (ex: "http://localhost:3001/abc")
2. { body }: 전달할 데이터를 {} 안에 JSON 문법처럼 key와 value 쌍으로 보내주면 됩니다.
3. then: 서버와 연결에 성공했을 때 실행돼야 하는 것을 적는 부분입니다.
4. catch: 서버와 연결에 실패했을 때 어떤 오류가 발생했는지 알기 위해 사용해야 할 부분입니다.

 

 

 

📌 axios.post 활용하기

// react-hook-form에서 handleSubmit에 사용된 함수입니다.
const submitForm = (data) => {
  axios.post("http://localhost:3001/members", {data: data, lon: coord.lon, lat: coord.lat})
    .then(response => { console.log('성공!!'); })
    .catch(error => { console.log(err); })
}

...
return (
  <form
    onSubmit={handleSubmit(submitForm)}
  >...
)

react-hook-form을 활용해서 제출할 때 입력값 외에도 전달할 데이터가 있을 때
만약 react-hook-form에 대해 알고 싶다면 react-hook-form로 회원가입 하기를 참고해 주세요!

react-hook-form을 사용하고 제출하게 되면 JSON 형식으로 데이터가 전달됩니다.
그렇다고 axios.post([URL], data, {key1: value1, key2: value2}) 이런 식으로 전달하면 절대 안 됩니다..!

전달될 데이터는 무조건 { body } 안에 한 번에 써줘야 합니다.

kakao API를 사용하신 분들 중에서 axios.get 할 때 header라는 것을 써줘야 하는 걸 보신 적이 있을 텐데 body 다음은 header가 들어갈 부분이기 때문에 데이터를 올바르게 전달해줘야 합니다.

따라서 맞게 작성하려면 위 코드처럼 {} 안에 JSON 형식으로 데이터를 담아줘야 합니다.

 

 

 

📌 axios.post로 전달된 데이터 가져오기

app.post("/members", (req, res) => {
  const [data, lon, lat] = req.body;
  /*
  {
    data: {id: abc123, pw: abcdefds},
    lon: 123.1233413,
    lat: 37.182374
  }
  */
});

req에는 전달된 데이터가 담겨 있습니다.
따라서 데이터들을 body에 적어줬기 때문에 가져오려면 req.body를 해주면 주석에 나온 것처럼 결과를 얻을 수 있습니다.