React - 회원가입

비밀번호와 비밀번호를 체크하는 input이 있을경우

두개의 state값을 비교해서 값이 같고 다름을 비교했었다.

const [password, setPassword] = useState('');
const [passwordCheck, setPasswordCheck] = useState('');

useEffect(()=>{
	if(password !== passwordCheck){
    	//... logic
    }
})

강의보면서 알게된 새로운 방법

  const [password, setPassword] = useState('');
  const [passwordCheck, setPasswordCheck] = useState('');
  // 비밀번호만 체크해 주는 State
  const [mismatchError, setMismatchError] = useState(false);
  
 // 비번이 다르면 false
  const onChangePassword = useCallback(
    (e) => {
      setPassword(e.target.value);
      setMismatchError(e.target.value !== passwordCheck);
    },
    [passwordCheck],
  );

 // 비번이 다르면 false
  const onChangePasswordCheck = useCallback(
    (e) => {
      setPasswordCheck(e.target.value);
      setMismatchError(e.target.value !== password);
    },
    [password],
  );

// 비번이나 이메일 에러처리
{mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>}
{!nickname && <Error>닉네임을 입력해주세요.</Error>}