Form 상태를 다루는 방법은 다양하다
export const JoinPage = () => {
const [id, setId] = useState("")
const [isId, setIsId] = useState(false);
const [idMessage, setIdMessage] = useState("");
const [password, setPassword] = useState("");
const [isPassword, setIsPassword] = useState(false);
const [passwordMessage, setPasswordMessage] = useState("");
const [passwordCheck, setPasswordCheck] = useState("");
const [isPasswordCheck, setIsPasswordCheck] = useState(false);
const [passwordCheckMessage, setPasswordCheckMessage] = useState("");
const [name, setName] = useState("")
const [isName, setIsName] = useState(false);
const [nameMessage, setNameMessage] = useState("");
const [email, setEmail] = useState("");
const [isEmail, setIsEmail] = useState(false);
const [emailMessage, setEmailMessage] = useState("");
----
const [formState, setFormState] = useState({
formValue: {
id: "",
password: "",
passwordCheck: "",
name: "",
email: ""
},
formErrors: {
id: "",
password: "",
passwordCheck: "",
name: "",
email: ""
},
formValidity: {
id: false,
password: false,
passwordCheck: false,
name: false,
email: false
},
})
----
const onChange = useCallback((e) => {
const {
target: { name, value },
} = e;
if (name === "email") {
setEmail(value);
const emailRegex =
/([\\w-.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$/;
if (!emailRegex.test(value)) {
setEmailMessage("올바르지 않은 이메일 형식입니다.");
setIsEmail(false);
} else {
setIsEmail(true);
}
} else if (name === "password") {
setPassword(value);
const passwordRegex = /^(?=.*\\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,}$/;
if (!passwordRegex.test(value)) {
setPasswordMessage(
"비밀번호는 8자 이상 영문과 숫자의 조합이어야 합니다."
);
setIsPassword(false);
} else {
setIsPassword(true);
}
}
}, []);
const onSubmit = useCallback(
async (e) => {
e.preventDefault();
if (isEmail && isPassword) {
try {
const isSignUp = await axios.post(`${API_ENDPOINT}user/emailvalid`, {
user: { email: email },
});
if (isSignUp.data.message === "사용 가능한 이메일 입니다.") {
setSignUp({ email: email, password: password });
} else {
alert(isSignUp.data.message);
}
} catch (err) {
alert("잘못된 접근입니다.");
}
}
},
[email, password, router]
);
필요한 것
리액트로 폼을 다루긴 위해선 많은 보일러플레이트 코드가 필요하다
<aside> 📌 보일러 플레이트 코드 개발자들에게 불필요하고 반복적인 일들을 하지 않도록 도와주는 것을 뜻한다.
</aside>