react 코드

<form onSubmit={handleSubmit}>


  const handleSubmit = async (e) => {
    e.preventDefault();

    // Replace 'YOUR_API_ENDPOINT' with the actual API endpoint for member registration
    const response = await fetch('YOUR_API_ENDPOINT', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    if (response.ok) {
      // Handle successful registration, e.g., show success message or redirect to a login page
      console.log('Member registered successfully!');
    } else {
      // Handle registration failure, e.g., show error message
      console.error('Member registration failed!');
    }
  };

 

 

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };


이벤트가 발생한 것의 name 값에 따른 value를
e.target에서 name,value를 뽑아옴.
setFormData를 호출해서 formData 내에 이것만 값을 수정



           <label>
            Password:
            <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
            />
          </label>

값이 바뀔때 마다(onChange)
handleChange를 호출하여 FormData 값을 변경하는 것임.

 

 

 

<a href="https://www.flaticon.com/kr/free-icons/" title="작업 아이콘">작업 아이콘  제작자: juicy_fish - Flaticon</a>

  const [formData, setFormData] = useState({
    //firstName: '',
    //lastName: '',
    name: '',
    email: '',
    password: '',
  });


useState는 안에 필드들을 갖는 객체와 같은 형태임
formData 는 변수명이다.
setFormData는 formData를 수정할 때 호출하는 메서드