React 데이터 가공해서 보내주기

데이터 가공하기

저번 포스팅과 마찬가지로 2차 프로젝트 중 내가 담당한 구역은 예약 페이지에(예약자 정보, 탑승객 정보) 정보를 담아 백엔드에 전달하는 부분이었다.

그러던중 가상의 배열을 만들어 탑승객 정보를 받을 수 있는 form을 완성하였다.

하지만 또 다른 문제를 만나버렸다... 내가 생각한 데이터 형식은

{
	0 : {
    first_name : 'KIM',
    last_name : 'IKHYUN',
    gender : 'male',
    year : 1995,
    month : 8,
    date : 8
    },
    1 : {
    탑승객 정보 ... 
    }, ... 
}

이런식으로 내가 만든 데이터는 객체안에 키 값을 갖고있는 객체가 있는 형식과 year,month,date 가 따로 들어있는 객체였다.

하지만 백엔드에서 원하는 데이터는

[
  {first_name : 'KIM',
    last_name : 'IKHYUN',
    gender : 'male',
    birthday : '1995-08-08'
  }, {탑승객 정보...}  ...
]

이런식의 배열 안에 키값이 없는 객체형식의 데이터 구조와 birthday로 한번에 묶어서 주기를 원하였다...

하지만 두둔...😭 내가 만든데이터는 탑승객 숫자마다 폼 숫자가 달라지므로 객체안 객체 데이터에 미리 값을 정할수가 없고 input창에 입력받은 데이터가 생성되는 구조였다...

const handlePassengerData = e => {
    const { name, value } = e.target;
  // 이벤트가 생긴 input창에 name이 객체 키값,value값이 value로 생성되는 형식
        setPassengerData({
           ...passengerData,
           [idx]: { ...passengerData[idx], [name]: value},
          // 재 랜더링된 객체를 가져와서 그 객체에 추가되는 형식
        });
};

이런식으로 객체를 생성하지 않으면 데이터를 담을 수 가 없었다 ... ㅠㅠ

그래서 하루종일 고민한 결과!!

1. 일단 배열안에 객체만 넣어보자!

Object.values(객체) 를 이용하여 배열안에 담아보자!

Object.values(passengerData)

출력 : [
  {
    first_name : 'KIM',
    last_name : 'IKHYUN',
    gender : 'male',
    year : 1995,
    month : 8,
    date : 8
    }, ... 
  ]

이렇게 담게 되면 잘 담긴것을 확인 할 수 있다!

2. year-month-day 로 가공하기

만든 배열값에 map을 활용해 가공한 데이터를 새로운 배열에 push하면 될거같아 해봤더니 진짜 되었다!!!🤩

 Object.values(passengerData).map(object =>
    PassengerDataArr.push({
      first_name: object.first_name,
      last_name: object.last_name,
      gender: object.gender,
      birthday:
        object.year + '-' + 
  		overTen(object.month) + '-' + 
   		overTen(object.day),
    })
  );
overTen은 숫자가 10 미만이면 08,07 이런식으로 0이 추가되는 함수!

느낀점

처음 코딩을 배울때는 백엔드와 소통을 안하다보니 그냥 주면 알아서 가공해주는 것인지 알았는데...

서버에 무리가 가면 안 된다는 것을 알게된 이후로는 백엔드에서 바로 사용 할 수 있도록 데이터를 전송해야 한다는것을 깨달았다!!

하지만 ... 값이 입력되었는지 검사를 해야해서 모든 값이 입력 되었을때 보낼수 있도록 검사를 해서 보내야 하는데 좀더 고민해봐야겠다ㅠㅠ