FormData
자바스크립트의 여러가지 Tags중 form 을 통해서 전송되는 데이터 타입을 일컽는다.
해당 타입으로 데이터를 전송하기 위해서는 form에 인라인으로 속성을 줘야하는데,
<form enctype="multipart/form-data" onSubmit={onSumbit}>
<button type="submit" />
</form>위와같이 enctype 을 통해서 form 으로 전송할 데이터의 타입을 지정해주고
form 내부에 type="submit" 속성을 가진 버튼을 이용하여 onSubmit 이벤트를 발생시키면 된다.
FormData의 구조는 key/value 쌍으로 이뤄진 객체인데,
데이터의 내용물을 콘솔로 찍어보면
console.log(formData);
위와 같이 빈 객체값이 읽힌다.
이러한 현상이 발생하는 이유를 찾아보니
결론적으로 브라우저 정책상 그렇다고 한다.
하지만 우리한테는 formData에
제대로 내가 원하는 정보가 append 되었는지 확인 할 의무가 있다.
그래서 찾아온 방법은?
for (var entries of formData.keys()) console.log(entries);그래서 콘솔을 찍어보면~
위와 같이 key , value가 찍히는 걸 볼 수있다~.
enties 말고도 keys 또는 value 로 찍어볼 수 도 있다.
그럼 어떻게 formData에 내가 원하는 정보를 넣는걸까?
appned 메소드를 이용한다.
const handleSubmit = event => {
const formData = new FormData();
formData.append('img', files.length && files[0].uploadedFile);
formData.append('title', inputValue.title && inputValue.title);
formData.append('categoty',CategoryStringToObject && CategoryStringToObject);
formData.append('address', AddressString && AddressString);
formData.append('price', inputValue.price && Number(inputValue.price));
formData.append('description',inputValue.description && inputValue.description);
}handleSubmit 이벤트를 발생시키기 이전에 차곡차곡 state에 저장해둔 정보들을 append한다.
그럼 위에서 다룬 formData를 콘솔로 확인하는 방법을 통해서 제대로 데이터가 들어간 것을 확인할 수 있다.
그럼 잘 만들어진 formData를 백엔드로 보내고싶을 때는 어떻게 하면 될까?
fetch('API_END_POINT', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(result => console.log(result))
;조금 간단해보이는 이유는 header가 없기 때문이다.
formData를 보낼 때,
binaryData라는 데이터가 자동으로 생성되는 header에 붙어서 같이 생성되어 보내지는데,
내가 header를 명시하는 순간, header는 자동으로 생성되지 않기 때문에
당연히 binaryData 데이터 또한 생성되지 않는다.
그렇게되면 백엔드에서는 내가 보낸 데이터가 formData라는 것을 알아볼 수 없는 상태로 데이터를 수신하게 되는데,
그렇게 받아본 데이터를 백엔드에서 콘솔로 찍어보면 undefinded가 찍히게 된다.
