[JS] FormData: 폼(form) 데이터를 쉽게 다룰 수 있는 API

📌 FormData

: 웹 브라우저에서 HTML form(폼) 데이터를 쉽게 다루기 위해 제공되는 API

• 폼 데이터를 JavaScript에서 읽거나 서버로 전송할 때 유용하다.
• 기능
  
  • 폼 데이터 수집
    
    • HTML 폼 요소의 데이터를 JavaScript 객체로 변환해서 수집할 수 있다.
  • 폼 데이터 전송
    
    • AJAX 요청 등을 통해 서버에 폼 데이터를 전송할 때 편리하다.

 

 

☑️ 메서드

• append(name, value)
  : FormData 객체에 새 키-값 쌍을 추가하거나, 기존 키에 새로운 값을 추가한다.
  - 키가 없으면 새로 추가하고, 있으면 값이 추가된다.
• set(name, value)
  : FormData 객체 내에서 주어진 키에 새 값을 설정하거나, 키가 없으면 새로 추가한다.
• delete(name)
  : FormData 객체에서 주어진 키와 관련된 키-값 쌍을 삭제한다.
  
  
• get(name)
  : FormData 객체 내에서 주어진 키와 연관된 첫 번째 값을 반환한다.
• getAll(name)
  : FormData 객체 내에서 주어진 키와 연관된 모든 값을 배열로 반환한다.
• has(name)
  : FormData 객체에 특정 키가 포함되어 있는지 여부를 boolean으로 반환한다.
   
• keys()
  : FormData 객체에 담긴 모든 키를 순회할 수 있는 iterator를 반환한다.
  
• values()
  : FormData 객체에 포함된 모든 값을 순회할 수 있는 iterator를 반환한다.
  
• entries()
  : FormData 객체의 모든 키-값 쌍을 순회할 수 있는 iterator를 반환한다.

// HTML 폼 요소 선택
const form = document.querySelector('form');

// FormData 객체 생성
const formData = new FormData(form);


// append(name, value)
formData.append('username', 'JohnDoe');
formData.append('age', '30');

// set(name, value)
formData.set('username', 'JaneDoe');

// delete(name)
formData.delete('age');


// get(name)
const username = formData.get('username');
console.log(`Username: ${username}`);

// getAll(name)
const allUsernames = formData.getAll('username');
console.log(`All Usernames: ${allUsernames}`);

// has(name)
const hasUsername = formData.has('username');
console.log(`Has 'username' key: ${hasUsername}`);


// keys()
for (const key of formData.keys()) {
  console.log(`Key: ${key}`);
}

// values()
for (const value of formData.values()) {
  console.log(`Value: ${value}`);
}

// entries()
for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

 

 

 

✅ 사용 

1. FormData 객체 생성 & 폼 데이터 수집

• 폼 제출 핸들러 내부에 FormData 객체를 생성한다.
• event.target을 전달하여 폼 데이터 전체를 가져온다.

const formData = new FormData(e.target);

 

 

2.  FormData 메서드로 폼 데이터에 접근하기

const name = formData.get('name');
formData.append('key', 'value');

 

 

3. 폼 데이터 전송하기

• FormData 객체는 fetch API나 XMLHttpRequest를 사용하여 서버로 전송할 수 있다.

fetch('/submit-form', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
};

 

 

 

 

예제) 폼(form) 데이터 컴포넌트

import React from 'react';

function SimpleForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // 페이지 리로드 방지

    // FormData 객체 생성 (form 데이터를 수집)
    const formData = new FormData(event.target);

    // FormData에서 데이터를 추출
    const name = formData.get('name');
    const email = formData.get('email');

    // 데이터를 콘솔에 출력
    console.log('Name:', name);
    console.log('Email:', email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          <input type="text" name="name" required />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input type="email" name="email" required />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default SimpleForm;

 

 

---

 

FormData - Web API | MDN