[react]유효성 검사 (form validation)

회원가입등 기본 유효성 검사 기본 틀 

import {useState, useEffect} form 'react';
import {useHistory} from 'react-router-dom';

useState : 상태관리 hook

useEffect : state 변경시 반영 hook

useHistory : 페이지 이동 hook

 

function Join(){
// 유효성검사를 통과하면 이동할 history hook을 변수에 지정
 const history = useHistory();
 // input에서 입력받은 값을 객체에 저장
 const initval ={
  userid:'',
  pwd:'',
  check:null
 }
 
 // 상태 지정
 const [val, setVal] = useState(initVal); // value를 initval객체 넣는 state
 const [err, setErr] = useState({}); // 유효성에서 통과를 못할 경우 해당 문구를 담을 state
 const [isSubmit,setIsSubmit] = useState(fasle); // 유효성의 통과여부를 담는 state
 
 // 유효성 검사 통과 여부를 결정지을 함수
 const validation = (val) => {
  // 에러가 나면 문구를 담을 객체 생성
  const errs = {};

 // userid의 value가 5글자 미만이면 오류를 errs객체 userid라는 key값으로 담기
  if (val.userid.length < 5) {
   errs.userid = 'id를 5글자 이상 입력하세요';
  }
  return errs;
 };

// input 요소에서 값이 바뀌면 실행될 함수
 const handleChange = (e) => {
  // 구조분해할당을 통해 e.target의 가져올 객체 값 저장
  const { name, value } = e.target;
  
  // setVal에 값을 저장, 전개연산자를 이용해 바꾸지 않을 값들을 깊은 복사
  setVal({ ...val, [name]: value });
  };
  
  // 폼데이터 전송 시 실행할 함수
  const handelSubmit = (e)=>{
   // 기본 이동 막기
   e.preventDefault();
   
   // check함수에서 유효성 검사를 거쳐 반환된 객체를 setErr 객체에 전달
   setErr(check(validation));
  };
  
   useEffect(()=>{
   // err의 값이 변경되면 객체에 담긴 개수 세기
    const len = Object.keys(err).length;
    
    // err의 객체에 값이 0개이고 isSubmit이 참이면 경로이동
    if(len === 0 && isSubmit) {
     // 메인으로 페이지 이동
     history.push('/');
    }
   },[err]);
}

return (
 <>
 // submit 전송시 실행될 함수
  <form onSubmit={handleSubmit}>
   // 객체 value값을 담으려면 항상 onChange를 써줘서 값이 변화할때마다 이벤트를 담아주고 그 값을 value로 받아와야한다. 
   <input type='text' id='userid' name='userid' value={val.userid} onChange={(e)=> handleChange(e)}>
   // err가 나면 err문구 출력
   <div className='err'>{err.userid}</div>
   
   // 버튼 클릭시 submit에 전송하겠다는 state값을 변경 -> form에서 handleSubmit으로 유효성 검사 실행되는것
   <input type='submit' vlaue='JOIN' onClick={()=>setIsSubmit(true)}>
  </form>
 </>
)