[DAY41] TIL

비밀번호 중복확인

1. 문제 : 비밀번호 중복 확인 함수를 만들었는데 어떻게 적용해야하는지 모르겠다..

2. 시도

  // 필요한 state 설정
  const [newUser, setNewUser] = useState({
    accountId: "",
    password: "",
    nick: "",
  });

  // 중복확인용 state들
  const [validPw, setValidPw] = useState({ body: "", isValid: false });

  // 비밀번호 중복 확인
  const validatePwHandler = () => {
    String(validPw.body) === String(newUser.password)
      ? setValidPw({ ...validPw, isValid: true })
      : setValidPw({ ...validPw, isValid: false });
    console.log("성공적으로 pw값을 바꿨다.", validPw.isValid);
  };

  //회원가입 버튼
  const addUserHandler = (e) => {
    e.preventDefault();
    validatePwHandler();
    console.log("pw", validPw.isValid);
    if (
      validId &&
      validPw.isValid &&
      validNick
    ) {
      dispatch(__addUsers(newUser));
      if (users) {
        navigate("/login");
      }
    }
  };

  return (
     <div>
        <FormWrapper>
          <label>pw:</label>
          <Input
            required
            type="password"
            value={newUser.password}
            onChange={(e) =>
              setNewUser({ ...newUser, password: e.target.value })
            }
          />
        </FormWrapper>
        <FormWrapper>
          <label>pwVaildation:</label>
          <Input
            type="password"
            value={validPw.body}
            onChange={(e) => {
              setValidPw({ ...validPw, body: e.target.value });
            }}
          />
        </FormWrapper>
        {validPw.body ? (
          validPw.isValid ? (
            <span>비밀번호가 일치합니다.</span>
          ) : (
            <span style={{ color: "red" }}>비밀번호가 일치하지 않습니다.</span>
          )
        ) : null}
      </div>
  );

3. 해결

  const [rePw, setRePw] = useState("");


// 중복 확인 함수 생성
  const checkSamePwHandler = (item) => {
    return newUser.password !== item ? false : true;
  };


// html 부분
{rePw ? (
          checkSamePwHandler(rePw) ? (
            <span>비밀번호가 일치합니다.</span>
          ) : (
            <span style={{ color: "red" }}>비밀번호가 일치하지 않습니다.</span>
          )
        ) : null}

4. 알게된 점
   함수를 빼주고 불린값을 줘서 그걸 xtml 부분 내에서 활용할 수 있따.