✨ FormData란?
FormData는 폼을 쉽게 보내도록 도와주는 객체
HTML 단이 아닌 자바스크립트 단에서 폼 데이터를 다루는 객체로 HTML에서의 Submit 제출 동작은 Ajax를 통해 서버에 제출한다.
- 파일이나 이미지를 서버에 전송하는 경우에 중요한 개념인 multipart/form-data에 주로 사용된다.
- 자바스크립트로 좀 더 타이트하게 FormData를 관리하고 싶을 때 formData 객체를 이용한다.
multipart/form-data란?
http 메시지에 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송한다., 즉 이미지, 파일 등이 png, jpg 파일 자체가 전송되는 것이 아닌 인코딩된 데이터로 전송된다.
✏️ FormData 기본 문법
1. formData.append()
// FormData 기본 문법
// 자바스크립트로 직접 form 태그를 생성
let formData = new FormData(); // 새로운 폼 객체 생성
formData.append('name', 'yoo'); // 폼 데이터를 스크립트로 추가
formData.append('age', '29'); // <input name="age" value="29">
formData.append('hobby', 'soccer'); // <input name="hobby" value="soccer">FormData 객체에 append() 메소드로 key와 value 값을 차례로 추가해주면 input 태그에 값을 입력하는 것과 같은 효과를 가진다.
2. formData.delete()
formdata.delete(name)
// name에 해당하는 필드를 삭제한다.delete() 메소드는 해당 폼 객체에서 key와 그 값에 해당하는 value를 지운다.
3. formData.get()
formData.get(name)
// name에 해당하는 필드의 첫번째 값을 가져온다.get() 메소드는 name에 대한 필드의 첫번째 값을 가져온다.
4. formData.getAll()
formData.getAll(name)
// append 함수로 추가시 name이 중복 가능
// 주어진 name의 해당하는 필드의 모든 value를 반환
formData.append('username', 'Chris');
formData.append('username', 'Bob');
formData.getAll('username'); // Returns ["Chris", "Bob"]getAll()메소드는 name에 대한 필드의 값이 여러개 일 때, 배열 형태로 모든 값을 가져온다.
5. formData.entries()
for(let [key, value] of formData.entries()){
console.log(key, value);
}entries() 메소드는 객체에 포함된 모든 key/value 쌍을 통과하는 iterator를 반환해주는 메소드이다.
for ~of 반복문과 함께 사용하여 값을 확인할 수 있다.
6. formData.has()
formData.has(name)
// name에 해당하는 필드가 있으면 true, 아니면 false 반환has() 메소드는 해당하는 값을 찾을 때 사용한다.
7. formData.set()
formData.set(name, value)
formData.set(name, blob, fileName)set() 메소드는 formData 객체 내에 있는 기존 Key에 새 값을 설정하거나, 존재하지 않을 경우 key/value을 추가할 수 있는 메소드로,
append와 비슷한 점이 있지만, 차이점은 지정된 Key가 이미 존재할 경우
set은 모든 기존 값들을 새로운 값으로 덮어쓰기하지만, append는 기존 값의 끝에 새 값을 추가한다.
