[JavaScript] FormData 알아보기!

FormData

FormData는 form필드와 그 값을 쉽게 보내고 생성할 수 있도록 도와주는 객체입니다.
이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다.
생성자는 다음과 같습니다.

let formData = new FormData(폼);

FormData 메서드

1. formData.append()

append 메서드는 두가지 방식의 버전이 있습니다.
매개변수를 2가지를 가지고 있는 버전과 3가지를 갖는 버전이 있습니다.
하나하나 알아보자면 다음과 같습니다.

• 매개변수가 2개인 버전

formData.append(name, value)
// name과 value를 가진 폼 필드를 추가

• 매개변수가 3개인 버전

formData.append(name, blob, fileName)
// <input type="file">형태의 필드를 추가
// fileName은 file의 이름의 해당

2. formData.delete()

delete 메서드는 해당 폼 객체에서 key와 그 값에 해당하는 것을 지웁니다.

formData.delete(name)
// name에 해당하는 필드를 삭제

3. formData.get()

get 메서드는 원하는 값을 가져올 수 있도록 해주는 것 입니다.

formData.get(name)
// name에 해당하는 필드의 첫번째 값을 가져옴

4. formData.getAll()

getAll메서드는 값이 여러개이고, 모든 값을 원할 때 사용하는 메서드입니다
.

formData.getAll(name)
// append 함수로 추가시 name이 중복 가능
// 따라서 주어진 name 의 해당 하는 필드의 모든 value를 반환

// 예시
formData.append('username', 'Chris');
formData.append('username', 'Bob');
formData.getAll('username'); // Returns ["Chris", "Bob"]

5. formData.entries()

entries 메서드는 객체에 포함된 모든 key/value 쌍을 통과하는 iterator 를 반환해주는 메서드입니다.
for ~of 반복문과 함께 사용하여 값을 확인할 수 있습니다.

for(let [key, value] of formData.entries()) {
   console.log(key, value);
}

6. formData.has()

has 메서드는 해당하는 값을 찾을 때 사용이 됩니다

formData.has(name)
// name에 해당하는 필드가 있으면 true를, 그렇지 않으면 false를 반환

7. formData.set()

set 메서드는 FormData 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 key/value을 추가 할 수도 있는 메서드입니다.
append와 비슷한 점이 있지만, 차이점은 지정된 키가 이미 존재할 경우에,
set 은 모든 기존 값들을 새로운 값으로 덮어쓰기하는 반면, append 는 기존 값의 끝에 새 값을 추가합니다.

formData.set(name, value)
formData.set(name, blob, fileName)