폼을 객체로 변환하기

소개

이 랩에서는 JavaScript 를 사용하여 일련의 폼 요소들을 객체로 변환하는 방법을 살펴봅니다. FormData 생성자와 Array.from() 메서드를 사용하여 폼 데이터 배열을 생성합니다. 그런 다음 Array.prototype.reduce() 메서드를 사용하여 폼 데이터를 객체로 수집합니다. 이 랩을 마치면 JavaScript 를 사용하여 폼 데이터를 수집하고 구성하는 방법에 대한 이해도가 높아질 것입니다.

폼을 객체로 변환하기

코딩 연습을 위해 터미널/SSH 를 열고 node를 입력하세요. 다음 단계를 사용하여 일련의 폼 요소들을 객체로 인코딩할 수 있습니다.

1. FormData 생성자를 사용하여 HTML form을 FormData로 변환합니다.
2. Array.from()을 사용하여 FormData를 배열로 변환합니다.
3. Array.prototype.reduce()를 사용하여 배열에서 객체를 수집합니다.

다음은 코드 예시입니다.

const formToObject = (form) =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

특정 폼을 변환하려면 formToObject 함수를 호출하고 폼 요소를 인수로 전달하면 됩니다.

formToObject(document.querySelector("#form"));
// { email: 'test@email.com', name: 'Test Name' }

요약

축하합니다! 폼을 객체로 변환하는 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.