🚨 일단 전체적으로 코드를 짠 후 중복되는것이 다수 발견되면 줄이는거임 🚨
🚨 무턱대고 이거 중복이겠지하고 줄이는작업을 먼저 하는건 김민태님정도 되어야 가눙 🚨
const [email, setEmail] = useState('');
const [nickname, setNickname] = useState('');
const [password, setPassword] = useState('');
const [passwordCheck, setPasswordCheck] = useState('');
const [missmatchError, setMissmatchError] = useState(false);
const Inputref = useRef() as React.MutableRefObject<HTMLInputElement>;
const onChangeEmail = useCallback((e: any) => {
setEmail(e.target.value);
}, []); // useCallback을 써야 성능최적화 실현가능
const onChangeNickname = useCallback((e: any) => {
setNickname(e.target.value);
}, []);
const onChangePassword = useCallback(
(e: any) => {
setPassword(e.target.value);
setMissmatchError(e.target.value !== passwordCheck);
},
[passwordCheck], //함수 바깥에서 선언한 친구는 써도됨 (변하지 않는 값은 쓰지않아도됨 ex> setPassword)
);
const onChangePasswordCheck = useCallback(
(e: any) => {
setPasswordCheck(e.target.value);
setMissmatchError(e.target.value !== password);
},
[password],
);
const onSubmit = useCallback(
(e: any) => {
if (email.length < 1) {
e.preventDefault();
Inputref.current.focus();
return;
} else {
e.preventDefault();
console.log(email, nickname, password, passwordCheck);
if (!missmatchError) {
console.log('에러따위 없소 ! 서버로 회원가입가기 전송해도 될듯하오');
}
}
},
[email, nickname, password, passwordCheck, missmatchError],
);