formData의 값을 console.log로 볼 수 없는 원인

문제 상황

Add Dress 페이지의 form 태그를 통해 유저는 드레스에 대한 제반 사항을 입력하게 되고 이를 FormData에 append할 때 발생하였다.

과정을 조금 더 자세히 보면, 드레스의 각 정보들은 컴포넌트의 state에 관리되고 입력이 끝나면 submit 이벤트가 발생할 때 FormData에 각 정보들이 append 되어 서버에 보내진다.

나는 서버에 보내기 전에 FormData에 각 정보들이 잘 append되었나 확인하기 위해 console.log를 이용하여 확인하였지만 아래와 같은 이상한 객체만 반환하고 있었다.

 

let formData = new FormData();
formData.append('foo', 'test');
console.log(formData);
// FormData {}

 

 

FormData 객체란?

 

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.

FormData 객체에 대한 설명은 MDN에 위와 같이 안내되어 있다. 단순한 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태라고 볼 수 있다.

따라서 문자열화할 수 없는 객체이기 때문에 console.log를 사용해서 프린트할 수 없다.

만약 전송 전에 FormData의 값을 확인하고 싶다면, 아래와 같이 FormData의 메소드를 사용해야 한다.

 

// FormData의 key 확인
for (let key of formData.keys()) {
  console.log(key);
}

// FormData의 value 확인
for (let value of formData.values()) {
  console.log(value);
}

 

 

참고자료:https://velog.io/@josworks27/formData-console.log