form input 유효성 검사

결과

내용

• name 조건: 값의 길이가 1이거나, 4보다 많거나, 값이 없을때
• phone number 조건: 값의 길이가 13보다 작거나
• content 조건: 값의 길이가 3보다 작거나, type이 string일때
  조건부 렌더링을 통해 에러 메세지를 보여줌
• 값이 모두 만족하면 '전송되었습니다.' 라는 알림창이 뜨고 입력된 값이 콘솔로 찍힘

코드

//사용자가 입력 필드에 입력한 데이터를 보유
  const [values, setValues] = {
    nameValue: '',
    numberValue: '',
    contentValue: '',
  };;
//각 입력 필드에 대한 오류를 보유
  const [inputStatus, setInputStatus] = useState({});
//양식이 제출중인지 여부를 추적함(양식에 오류가 없는 경우에만 해당됨)
  const [errCheck, setErrCheck] = useState(false);

//입력이 values상태와 동기화 된 상태로 유지되고, 
//사용자가 입력 할 때 상태가 업데이트된다.
  const handleChange = e => {
    const { value, name } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

//양식이 제출 될 때마다 inputStatus 상태 변수는 setInputStatus(err(values)) 메소드를 사용하여 오류를 나타낸다.
  const handleSubmit = e => {
    e.preventDefault();
    setInputStatus(err(values));
    setErrCheck(true);
  };

//values 객체를 이 함수에 대한 인수로 전달한 다음 유효성검사 테스트를 하면서 오류가 채워지고 반환된다.
  const err = values => {
    let errors = {};

    //name input
    if (
      values.nameValue.length === 1 ||
      values.nameValue.length > 4 ||
      !values.nameValue
    ) {
      // 조건에 맞으면 에러 메세지를 반환
      errors.nameValue = '이름을 확인해주세요.';
    }
    
    //number input
    if (values.numberValue.length < 13) {
      errors.numberValue = '휴대번호를 확인해주세요.';
    }

    //content input
    if (values.contentValue.length < 3 || !typeof contentValue === 'string') {
      errors.contentValue = '내용을 확인해주세요.';
    }
    
	//에러 반환
    return errors;
  };

  //inputStatus길이가 0 이거나 errCheck가 true 상태일 때
  //submitForm을 누르면 inputStatus가 마운트 되도록
//inputStatus 객체가 비어 있는지, errCheck가 참인지 확인한다.
//이 검사가 참이면 submitForm이 호출된다.
//단일 종속성, 즉 inputStatus객체도 있는데 inputStatus객체가 변경 될 때만 실행한다.
  useEffect(() => {
    if (Object.keys(inputStatus).length === 0 && errCheck) {
      submitForm();
    }
  }, [inputStatus]);

//폼 데이터의 제출을 처리한다
  const submitForm = () => {
    console.log(values);
    //조건문을 사용하지 않으면 alert가 두번 나타남
    if (Object.keys(inputStatus).length === 0 && errCheck) {
      alert('전송되었습니다.');
      setValues({
        nameValue: '',
        numberValue: '',
        contentValue: '',
      });
    }
  };

return(
	{/* 버튼을 누르면 이 폼에 데이터들이 제출되도록 */}
      <ContentWrap onSubmit={handleSubmit}>
        <ContentBox>
          <div>Name</div>
          <ContentInput
            name="nameValue"
            defaultValue={values.nameValue}
            onChange={handleChange}
          />
          {/* 에러시 */}
          {inputStatus.nameValue && <ErrMes>{inputStatus.nameValue} </ErrMes>}
        </ContentBox>
        <ContentBox>
          <div>Phone Number</div>
          <ContentInput
            name="numberValue"
            defaultValue={values.numberValue}
            onChange={handleChange}
          />
          {inputStatus.numberValue && (
            <ErrMes>{inputStatus.numberValue}</ErrMes>
          )}
        </ContentBox>
        <ContentBox>
          <div>Content</div>
          <ContentInput
            name="contentValue"
            defaultValue={values.contentValue}
            onChange={handleChange}
          />
          {inputStatus.contentValue && (
            <ErrMes>{inputStatus.contentValue}</ErrMes>
          )}
        </ContentBox>
        <Submit type="submit" onKeyUp={handleSubmit} errCheck={errCheck}>
          Send
        </Submit>
      </ContentWrap>
);