[React] 서버에 form 보내기(2)

✅ 리팩토링 전

💥 문제점
서버에 form을 보내는 것에는 성공해 포스팅을 했지만, 여전히 개선해야할 것이 남아있었어요. HTML <form>태그가 있음에도 formData객체에 append()메서드를 사용해 필드를 추가했다는 것을 FormData 객체를 읽어보며 알게됐기 때문..

✨ 개선방안
append()메서드 없이 <form>자체를 객체에 넣어 서버로 보내보는 방식으로 수정해보자-!

// 회원가입 버튼 클릭 시, formData 제출
const checkSignUp = (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append("email", email);
  formData.append("name", name);
  formData.append("nickname", nickname);
  formData.append("password", password);
  formData.append("profileImg", imgRef.current.files[0]);

  fetch("API 주소", {
    method: "POST",
    headers: {
      enctype: "multipart/form-data",
    },
    body: formData,
  })
    .then((response) => {
      if (response.ok === true) {
        return response.json();
      }
    })
    .then((data) => {
      if (data.message === "로그인 성공") {
        localStorage.setItem("TOKEN", data.accessToken);
        alert("로그인 성공");
        navigate("/main");
      } else {
        alert("로그인 실패");
      }
    });
  
    return (
       <>
   		<form id="signupForm" onSubmit={checkSignUp}>
          <label htmlFor="profileImg">프로필 이미지 추가</label>
          <input name="profileImg" type="file" accept="image/*" id="profileImg"/>
          <input name="email" placeholder="이메일 주소"/>
          <input name="name" placeholder="이름"/>
          <input name="nickname" placeholder="닉네임"/>
          <input name="password" type="password" placeholder="비밀번호"/>
	      <button>회원가입</button>
        </form>
       </>
   );
};

✅ 리팩토링 후

🎉 해결

• form태그 속 input의 속성인 name이 중요했어요. <input name="텍스트">에서 name 속성은 폼(form)이 제출된 후 서버에서 폼 데이터(form data)를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용된다는걸 알게됐죠!
• 백엔드분과 참조하게 될 name을 서로 맞춘 결과 <form>태그 속 입력한 input값인 텍스트와 이미지 파일 모두 제대로 전달되는 것을 확인할 수 있었답니다~!

// form 가져오기
const signupForm = document.getElementById("signupForm");

// 회원가입 버튼 클릭 시, 가져온 form 제출
const checkSignUp = (e) => {
	e.preventDefault();
	
	fetch("API 주소", {
    	method: "POST",
    	headers: {
    		enctype: "multipart/form-data",
    	},
    	body: new FormData(signupForm),
	})
    .then((response) => {
    	if (response.ok === true) {
      		return response.json();
    	}
    .then((data) => {
    	if (data.message === "추석 특공대 화이팅!") {
        	alert("회원가입 성공");
        	navigate("/");
    	} else {
        	alert("회원가입 실패");
    	}
   });
   
   return (
       <>
   		<form id="signupForm" onSubmit={checkSignUp}>
          <label htmlFor="profileImg">프로필 이미지 추가</label>
          <input name="profileImg" type="file" accept="image/*" id="profileImg"/>
          <input name="email" placeholder="이메일 주소"/>
          <input name="name" placeholder="이름"/>
          <input name="nickname" placeholder="닉네임"/>
          <input name="password" type="password" placeholder="비밀번호"/>
	      <button>회원가입</button>
        </form>
       </>
   );
};