Frontend - api 요청 시 req.body 자료형

프론트에서 서버로 api 요청을 보낼 때 req.body에 보낼 정보를 삽입해서 요청한다. 그 때 보내는 정보는 객체 형식이어야 한다.

보내는 정보가 객체 형식이 아닌 경우

// userTo = 5e43c81f5cfa401f9ab5410f
let variable = userTo; // 보내는 정보를 객체에 담지 않음
    Axios.post('/api/subscribe/subscribeNumber', variable).then(res => {
      if (res.data.success) {
        console.log(res.data);
        setSubscribeNumber(res.data.subscribeNumber);
        console.log('SubNumber: ', SubscribeNumber);
      } else {
        alert('구독자 수 정보를 받아오지 못했습니다.');
      }

req.body = { 5e43c81f5cfa401f9ab5410f } // key값이 들어있지 않음

이 경우 서버에서 보내온 정보가 어느 정보인지 구별할 수 없다.

보내는 정보가 객체 형식인 경우

// userTo = 5e43c81f5cfa401f9ab5410f
let variable = { userTo: userTo }; // 정보를 객체에 담음
// 이름과 값이 변수의 이름과 동일하네요. 이렇게 변수를 사용해 프로퍼티를 만드는 경우는 아주 흔한데, 프로퍼티 값 단축(property value shorthand) 을 사용하면 코드를 짧게 줄일 수 있습니다. -> { userTo }
    Axios.post('/api/subscribe/subscribeNumber', variable).then(res => {
      if (res.data.success) {
        console.log(res.data);
        setSubscribeNumber(res.data.subscribeNumber);
        console.log('SubNumber: ', SubscribeNumber);
      } else {
        alert('구독자 수 정보를 받아오지 못했습니다.');
      }

req.body = { userTo: 5e43c81f5cfa401f9ab5410f } // key값: userTo

보내는 정보를 객체로 만들어주어야 서버에서 어떤 정보인지 파악하고 파악된 정보를 바탕으로 DB에 저장하거나 하는 등 다음 행동을 한다.