formData의 값을 참조 및 사용

---

다음과 같이 form 태그 내에서 Input value 값을 가져오기 위해서 formData 인터페이스를 사용하였다.

 

이후 formData 인스턴스를 코드 상에서 참조 및 사용하기 이전에 콘솔 창에서 어떤 정보가 출력되는지 확인하려고 했으나 formData에 대한 직접적인 데이터 정보가 아닌 FormData 객체에 대한 정보를 반환할 뿐이었다.

 

FormData

 

formData 객체

 

The FormData  interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

 

MDN에 따르면 formData 객체는 단순한 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태이다.

 

따라서 문자열화할 수 없는 객체이기 때문에 console.log를 통해 출력하거나 코드 상에서 직접 사용할 수 없었던 것이다.

 

해당 formData key와 value 쌍에 관련된 정보를 얻기 위해서 다음과 같은 방법을 사용할 수 있었다.

 

 1. formData.get() 메서드

let info = [formData.get('contact'), formData.get('delivery')];

 

 2. formData.keys()/values() 메서드

for (let key of formData.keys()) {
  console.log(key);
}

for (let value of formData.values()) {
  console.log(value);
}

 

 3. 인스턴스 생성 후 Array.from()를 메서드를 통해 배열화

const formRecords = Array.from(new FormData($formTag));

(...)

$currentItem.innerHTML = formRecords
    .map((record) => `${formMap[record[0]]}: ${record[1]}`) //key는 문자열 타입으로 저장되어 있기 때문에 배열 리터럴을 통해 프로퍼티 접근
    .join('<br />');
    //배열화 된 formData는 해쉬와 같이 key, value로 이루어진 한 쌍
    //formMap = { contact: 연락 수단, delivery: 배송 수단 }