[JS] form submit시 formData 객체로 받아서 객체로 변환하기

커스텀 훅을 만드려다가 알게 되었는데, 처음 커스텀훅에 input의 id값을 배열로 받아서 forEach나 for문을 돌려 값에 대한 validation을 하려고 했다. 근데 formData가 버젓이 있는데 굳이 그럴 필요없이 방법이 있지 않을까 싶어서 찾아보던 중 알게 되었다.

 

우선 콘솔로 찍어보느라 그냥 함수를 실행했는데 나중에 변경할 예정이다

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    getFormData(e.currentTarget)//여기서 e.CurrentTarget을 사용해 form element
  };

여기서 바로  FormData해서 FormData 객체를 만들어도 되지만, 나는 따로 함수로 빼서 했다

  const getFormData = (form: HTMLFormElement) => {
    const formData = new FormData(form);
    const formobj = serialize(formData);// 아래의 serialize 함수 실행
  };
  
    const serialize = (data: FormData) => {
    const formDataObject = Object.fromEntries(data.entries());//이렇게 하면 key:value형태인 일반 object가 된다
 return formDataObject;
  };

formDataObject 변수에는 이제 우리에게 익숙한 id값:value 이런식으로 object가 할당된다.

이번 검색을 통해 오늘도 새로운거 하나 배운다!

 

---

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Object.fromEntries() - JavaScript | MDN