e.preventDefault();

아.. 감사합니다!!

e.preventDefault();

import React, { useState, useCallback } from 'react'; import { Form, Input, Checkbox, Button } from 'antd'; const Signup = () => { const [passwordCheck, setPasswordCheck] = useState(''); const [passwordError, setPasswordError] = useState(false); const [term, setTerm] = useState(false); const [termError, setTermError] = useState(false); const useInput = (initValue = null) => { const [value, setter] = useState(initValue); const handler = useCallback((e) => { setter(e.target.value); }, []); return [value, handler]; }; const [id, onChangeId] = useInput(''); const [nick, onChangeNick] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmit = useCallback( (e) => { e.preventDefault(); if (password !== passwordCheck) { return setPasswordError(true); } if (!term) { return setTermError(true); } console.log({ id, nick, password, passwordCheck, term, }); }, [password, passwordCheck, term] ); const onChangePasswordCheck = useCallback( (e) => { setPasswordError(e.target.value !== password); setPasswordCheck(e.target.value); }, [password] ); const onChangeTerm = useCallback((e) => { setTermError(false); setTerm(e.target.checked); }, []); return ( Form onFinish={onSubmit} style={{ padding: 10 }}> div> label htmlFor='user-id'>아이디label> br /> Input name='user-id' value={id} required onChange={onChangeId} /> div> div> label htmlFor='user-nick'>닉네임label> br /> Input name='user-nick' value={nick} required onChange={onChangeNick} /> div> div> label htmlFor='user-password'>비밀번호label> br /> Input name='user-password' value={password} type='password' required onChange={onChangePassword} /> div> div> label htmlFor='user-password-check'>비밀번호확인label> br /> Input name='user-password-check' value={passwordCheck} type='password' required onChange={onChangePasswordCheck} /> div> {passwordError && ( div style={{ color: 'red' }}>비밀번호가 일치하지 않습니다.div> )} div> Checkbox name='user-term' checked={term} onChange={onChangeTerm}> 약관동의 Checkbox> {termError && ( div style={{ color: 'red' }}>약관에 동의하셔야 합니다.div> )} div> div style={{ marginTop: 10 }}> Button type='primary' htmlType='submit'> 가입하기 Button> div> Form> ); }; export default Signup;