[2022 하계 모각소] 3회차 결과

오늘은 리액트 훅에 전반적인 이론을 살펴보고 실습을 진행하였다.

 

회원가입 페이지에서 input으로 입력받는 아이디, 비밀번호, 이메일 기능을 useState와 useEffect를 사용하여 상태값 변화에 따른 결과를 가시화하는 것에 집중하였다.

 

1. 상태값 변화를 줄 변수 선언

const [id, setId] = useState("");
const [pwd, setPwd] = useState("");
const [pwdconfig, setPwdConfig] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phonenum, setPhoneNum] = useState("");

 

2. 각 변수별 유효성 검사를 위한 handle 함수 생성

 const handleId = (e) => {
    setId(e.target.value);

    const regexId = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{6,10}$/;

    if(regexId.test(id)) {
      setIdValid(true); 
    } else {
      setIdValid(false);
    }
  }
  
  const handlePwd = (e) => {
    setPwd(e.target.value);
    const regexPwd = /^[A-Za-z0-9]{9,20}$/;
    if(regexPwd.test(pwd)) {
      setPwdValid(true);
    } else {
      setPwdValid(false);
    }
  }
  
  const handleEmail = (e) => {
    setEmail(e.target.value);
    const regexEmail = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/;

    if(regexEmail.test(email)) {
      setEmailValid(true);
    } else {
      setEmailValid(false);
    }
  }

 

3. useEffect를 이용한 버튼 색상 변화주기

 

아이디, 비밀번호, 이메일 모두 각 유효성 검사에 맞게 잘 입력되어야 가입하기 버튼을 누를 수 있도록 useEffect를 이용하여 각 변수마다의 Valid를 검사하도록 만들어주었다.

 

const [idValid, setIdValid] = useState(false);
const [pwdValid, setPwdValid] = useState(false);
const [pwdconfigValid, setconfigValid] = useState(false);
const [emailValid, setEmailValid] = useState(false);
const [phonenumValid, setPhoneNumValid] = useState(false);

const [notAllow, setNotAllow] = useState(true);

먼저 각 변수마다의 Valid를 지정해주고 useEffect에 사용할 Allow상태를 보내줄 변수를 지정하였다.

useEffect(() => {
    if(idValid && pwdValid && emailValid) {
      setNotAllow(false);
      return;
    }
    setNotAllow(true);
  }, [idValid, pwdValid, emailValid]);

 

함수를 생성하고 html에 연결시켜주기 위한 코드를 작성하였다.

<input type="text" value={id} onChange={handleId} placeholder="6자 이상의 영문 혹은 영문과 숫자를 조합" />

<input type="password" value={pwd} onChange={handlePwd} placeholder="비밀번호를 입력해주세요"/>

<input type="text" value={email} onChnage={handleEmail} placeholder="marketkurly@kurly.com" />

이러한 방식으로 value와 onChange를 통해 상태 변화를 줄 수 있다.