TypeScript, React 비밀번호 정규식 확인 코드

 

 

 

안녕하세요!

이번에 비밀번호 변경을 하는 코드를 구현하면서,

에러 처리를 위한 정규식도 만들고

graphQL을 사용한 경험을 정리하고자 기록을 하게 되었습니다!

 

 

 

1️⃣ 새 비밀번호, 새 비밀번호 확인 input 만들기

 

 

// 새 비밀번호 input
<Input
  placeholder="새 비밀번호를 입력해 주세요."
  padding="15px"
  height="56px"
  focusBorderColor={newPasswordValueError ? `#de3434` : `#000000`}
/>

// 새 비밀번호 확인 input
<Input
  placeholder="새 비밀번호를 한번 더 입력해 주세요."
  padding="15px"
  height="56px"
  focusBorderColor={confirmNewPasswordValueError ? `#de3434` : `#000000`}
/>

 

 

 

input을 먼저 스타일링 해줄게요!

 

 

 

2️⃣ state 만들기

 

 

// 새 비밀번호
const [newPasswordValue, setNewPasswordValue] = useState<string>(``);
// 새 비밀번호 확인
const [confirmNewPasswordValue, setConfirmNewPasswordValue] = useState<string>(``);

 

 

 

3️⃣ input의 value 값 설정

 

 

<Input
  value={newPasswordValue} // 여기 추가해주세요
  placeholder="새 비밀번호를 입력해 주세요."
  padding="15px"
  height="56px"
  focusBorderColor={newPasswordValueError ? `#de3434` : `#000000`}
/>

<Input
  value={confirmNewPasswordValue} // 여기 추가해주세요
  placeholder="새 비밀번호를 한번 더 입력해 주세요."
  padding="15px"
  height="56px"
  focusBorderColor={confirmNewPasswordValueError ? `#de3434` : `#000000`}
/>

 

 

4️⃣ onChange 이벤트 만들어주기

 

 

  // 새 비밀번호 이벤트
  const onChangeNewPassword = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setNewPasswordValue(value);
  }, []);

// 새 비밀번호 확인 이벤트
  const onChangeConfirmNewPassword = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      setConfirmNewPasswordValue(value);
    },
    [newPasswordValue],
  );

 

 

 

👌 input에 이벤트 넣어주기

 

 

<Input
  value={newPasswordValue}
  onChange={onChangeNewPassword} // onChangeEvent 추가
  placeholder="새 비밀번호를 입력해 주세요."
  padding="15px"
  height="56px"
/>

<Input
  value={confirmNewPasswordValue}
  onChange={onChangeConfirmNewPassword} // onChangeEvent 추가
  placeholder="새 비밀번호를 한번 더 입력해 주세요."
  padding="15px"
  height="56px"
/>

 

 

 

5️⃣ graphQL + 리덕스 등등 사용해서 서버 통신(참고만)

 

 

각자의 방법으로 하시면 됩니다.

 

 

 

  // 나는 graphQL 사용
  const onClickChange = useCallback(async () => {
    try {
      await changePasswordMutation({
        variables: {
          input: {
            token: ``,
            newPassword: newPasswordValue,
            confirmPassword: confirmNewPasswordValue,
          },
        },
      });
      setChangeFinishModal(true);
    } catch (error) {
      console.log(`change-password-errod`);
    }
  }, [changePasswordMutation, confirmNewPasswordValue, newPasswordValue]);

 

 

 

6️⃣ 조건에 맞는 에러 설정하기

 

 

// 새 비밀번호 에러 체크
const [newPasswordValueError, setNewPasswordValueError] = useState<boolean>(false);
// 새 비밀번호 확인 에러 체크
const [confirmNewPasswordValueError, setConfirmNewPasswordValueError] = useState<boolean>(false);

 

 

 

7️⃣ 에러 체크 정규식 추가

 

 

👌 추가한 정규식 : 영문과 숫자를 조합하여 8자 이상 입력해 주세요.

 

  const onChangeNewPassword = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setNewPasswordValue(value);
    setNewPasswordValueError(!/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/.test(value)); // 이거 추가
  }, []);

 

 

👌 정규식에 맞춘 스타일링 추가

 

 

<Input
  value={newPasswordValue}
  onChange={onChangeNewPassword}
  placeholder="새 비밀번호를 입력해 주세요."
  padding="15px"
  border={newPasswordValueError ? `2px solid #de3434` : `2px solid #d1d8dd`}
  height="56px"
  focusBorderColor={newPasswordValueError ? `#de3434` : `#000000`}
/>
{newPasswordValueError && (
  <Text fontFamily={`medium`} fontSize="14px" lineHeight="17px" color="#de3434">
    영문과 숫자를 조합하여 8자 이상 입력해 주세요.
  </Text>
)}

 

 

 

8️⃣ 새 비밀번호 에러 확인 조건식

 

 

조건: 새 비밀번호 Input에 넣은 value와 새 비밀번호 확인 value가 일치하지 않으면 에러

 

 

 

  const onChangeConfirmNewPassword = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      setConfirmNewPasswordValue(value);
      setConfirmNewPasswordValueError(value !== newPasswordValue); // 이거 추가
    },
    [newPasswordValue],
  );

 

 

 

👌 에러 조건 맞춘 스타일링 추가

 

 

{confirmNewPasswordValueError && (
  <Text fontFamily={`medium`} fontSize="14px" lineHeight="17px" color="#de3434">
    동일한 비밀번호를 입력해 주세요.
  </Text>
)}

 

 

 

9️⃣ Input type password 설정

 

 

정규식, 에러 처리 끝내서 확인할 게 없으니까

type password를 추가해서 ** 처리 해줄게요!

 

 

<Input
  value={newPasswordValue}
  onChange={onChangeNewPassword}
  type="password" // 여기 추가
  placeholder="새 비밀번호를 입력해 주세요."
  padding="15px"
  border={newPasswordValueError ? `2px solid #de3434` : `2px solid #d1d8dd`}
  height="56px"
  focusBorderColor={newPasswordValueError ? `#de3434` : `#000000`}
/>


<Input
  value={confirmNewPasswordValue}
  onChange={onChangeConfirmNewPassword}
  type="password" // 여기 추가
  placeholder="새 비밀번호를 한번 더 입력해 주세요."
  padding="15px"
  border={confirmNewPasswordValueError ? `2px solid #de3434` : `2px solid #d1d8dd`}
  height="56px"
  focusBorderColor={confirmNewPasswordValueError ? `#de3434` : `#000000`}
/>

 

 

 

이렇게 하면 끝입니닷!!

잊어먹지 않기 ❤️