🚨  일단 전체적으로 코드를 짠 후 중복되는것이 다수 발견되면 줄이는거임 🚨

🚨  무턱대고 이거 중복이겠지하고 줄이는작업을 먼저 하는건 김민태님정도 되어야 가눙 🚨

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],
  );