React #13 _ 유효성 검사

 

유효성 검사의 방법에는 여러가지가 있다.

대표적으로 키보드 입력시 바로 유효성 검사해주거나, Blur 상태시(인풋칸에서 나갔을때) 유효성을 검사해주거나

Form 제출 시 유효성 검사를 해주는 방법 등등

 

나는 Form제출 시 유효성 검사해주는 방법을 선호하는데 앞의 두개의 단점은 유저가 아무것도 입력하지 않은 상태에서

버튼 광클같은 거 하면 벨리데이션으로 인한 에러가 유저에게 뜨긴 뜨는데 실제 콘솔 확인해보면 빈 데이터 상태로

전송이 된다. 그러므로 많은사람들이 주로 이용하는 Form 제출의 예시를 써본다.

const [formIsValid, setFormIsValid] = useState(false);

  function handleSubmit(event) {
    event.preventDefault();

    const emailValid = enteredValue.email.includes("@");

    if (!emailValid) {
      setFormIsValid(true);
      return;
    }
    setEnteredValue({
      email: "",
      password: "",
    });
    setFormIsValid(false);
    console.log(enteredValue);
  }

 

이런 식으로 폼 데이터를 제출하기 위한 handleSubmit 안에 벨리데이션을 만들어서

State로 true/false를 관리해서 랜더링을 해주면 간단하게 벨리데이션 가능하다.

 

하지만 지금 이건 로그인처럼 간단한 양식일 경우인데

회원가입 같이 인풋이 더 많아진다면 다른 방법이 또 있다.

 

일단 브라우저의 자체기능인 require 기능이다.

각 input에 required를 설정해놓으면 알아서 필수요소를 체크한다.

password의 경우에는 minlength 같은 거 설정 해주면 최소 비밀번호도 설정할 수 있다.