내배캠 주요 학습/매일 공부
react 코드
chaeyoung-
2023. 8. 8. 21:41
<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를 수정할 때 호출하는 메서드