리액트 로그인 유효성 검사 방법 3가지

1. input 태그 고유 속성 사용

• required
  • 내용이 입력되지 않으면 전송이 불가능합니다.

<form>
      <input type="text" required></input>
      <button type="submit">보내기</button>
</form>

• pattern
  • 정규식 패턴을 넣을 수가 있습니다.
  • 추가적으로  title 속성을 넣어 사용자에게 형식을 알려줄 수가 있습니다.

<form>
      생년월일 : <input type="text" name="bday" pattern="[0-9]{6}"  title="YYMMDD 6자리 숫자를 넣어주세요"/><br />
      <button type="submit">보내기</button>
</form>

• minlength, maxlength
  
  • 최소, 최대 글자를 제한이 가능합니다.

<form>
      <input type="password" minlength="8" maxlength="14" required></input>
      <button type="submit">보내기</button>
</form>

 

 

2. hook으로 직접 만들기

• retrun 값을 주거나 메시지를 표시하게 하거나 중복 검사 등등 넣을 수가 있습니다.

 // 생략
 
 if (email === '') {
      // 이메일이 비어있는 경우 오류 메시지 설정
      setErrorMessage('이메일을 입력하세요.');

    } else if (!emailPattern.test(email)) {
      // 이메일 형식이 올바르지 않은 경우 오류 메시지 설정
      setErrorMessage('올바른 이메일 형식이 아닙니다.');

    } else {
      //  post 방식
      try {
        console.log('이메일:',email);
        const user = { email: email }
        const response = await axios.post(`${url}/user/checkEmail`, user);
        console.log(response.data);
        // 중복으로 있으면 트루, 중복으로 없으면 펄스
        if (response.data===true) { // 중복이 있을 때 실행
          setErrorMessage("이미 사용 중인 이메일입니다.");
        } else { // 없을 때 실행
          setErrorMessage('');
        }
      } catch (error) {
        console.error("이메일 중복 확인 중 오류 발생:", error);
      }
    }

 // 생략

 

 

3. 라이브러리 활용하기

• formik과 react-hook-form 사용하기
  • 폼 상태 값 가져오기
  • 유효성 검사 및 오류 메세지 출력
  • formik의 경우 모든 컴포넌트 들이 동일한 상태를 공유를 해서 입력마다 리랜더링이 발생을 합니다.
    입력 필드가 많은 경우 성능 이슈가 발생 가능성이 있습니다.
  • react-hook-form의 경우 입력 필드가 각각 독립적으로 발생을 하여 해당 필드 부분만 리렌더링이 발생을 합니다.
    
    • 쉽게 설명을 하면 useState를 사용하는 방식이 formik이며, useReducer를 사용하는것이 react-hook-form 입니다.