FormData 객체 활용하기

FormData 객체는 HTML <form> 요소의 데이터를 쉽게 수집하고 전송하기 위한 특별한 형태의 객체입니다.

JavaScript 내장함수로써, vanila JavaScript 사용시 유용하며, React 등 프레임 웍을 사용하거나, 세밀한 유효성 검사가 필요한 경우 react-hook-form 과 zod 의 결합을 추천합니다.

// HTML에서 <form> 요소를 선택합니다.
const form = document.querySelector('form');

// FormData 객체를 생성합니다.
const formData = new FormData(form);

// FormData 객체에 데이터를 추가할 수도 있습니다.
formData.append('name', 'John Doe');
formData.append('email', 'johndoe@example.com');

// FormData 객체에서 특정 필드의 값을 가져옵니다.
const name = formData.get('name');
var email = formData.get('email');

console.log(name); // 'John Doe' 출력
console.log(email); // 'johndoe@example.com' 출력

1.  document.querySelector('form')을 사용하여 HTML 문서의 첫 번째 <form> 요소를 선택합니다.

2. 선택한 <form> 요소를 new FormData() 생성자에 전달하여, formData 변수에 FormData 객체를 생성합니다.

3. FormData 객체에 데이터를 추가하려면 formData.append(key, value)를 사용합니다. key는 데이터의 이름(name)이며, value는 데이터의 값입니다. 위의 예제에서는 이름과 이메일 데이터를 추가했습니다.

4. formData.get()은 FormData 객체에서 특정 필드의 값을 가져오는 메서드입니다. 해당 메서드를 사용하여 FormData 객체에 저장된 값을 가져올 수 있습니다.

 

FormData 객체에 포함된 전체 데이터를 확인하기 위해서는, for...of  를 사용하여 formData.entries()를 순회 할 수 있습니다. formData.entries()는 FormData 객체에 포함된 데이터의 [키, 값] 쌍을 반환합니다. 따라서 new FormData()을 사용하면 HTML <form> 요소의 데이터를 FormData 객체로 쉽게 수집할 수 있습니다.

// FormData 객체에 포함된 데이터를 순회하며 출력합니다.
for (let pair of formData.entries()) {
  console.log(pair[0] + ': ' + pair[1]);
}
// 실행결과
name: John Doe
email: johndoe@example.com

 

참고로 form.reset()은 HTML <form> 요소의 모든 필드를 초기 상태로 재설정하는 메서드입니다. 이를 호출하면 폼 안의 입력 필드의 값이 지워지고, 선택된 옵션과 체크된 체크박스 등도 초기 상태로 돌아갑니다.

form.reset()을 사용하면 폼을 다시 작성하거나 재설정해야 할 때 유용합니다. 사용자가 입력한 데이터를 초기화하고, 기본값으로 다시 설정하고자 할 때 사용할 수 있습니다.