step # 1

먼저 아이디 값과 패스워드 값을 빈 문자열로 state값으로 만들어줬다.
idCheck 정규식표현으로 유효성 검사 할 값을 false값을 지정했다.
pwCheck 유효성검사를 false로 똑같이 지정 !

푸쉬한 코드를 성훈님께서 리뷰해주셨다.

공식문서를 참고해서 봤을 때

자세한건 >>> React 문서

---

• 계산된 속성명으로 id pw value값을 handleLoginInfo 함수에 담아줬다!

---

ID 정규 표현식 & 텍스트로 뜨게 !

아래 네이버 로그인 페이지 화면처럼 구현 도전 !

조건 1) 먼저 우리는 id가 공백일 경우에 ID Input아래에
'아이디를 다시 입력해주세요' 라는 텍스트를 줘야한다!

조건 2) 아이디 형식이 어긋날 경우 @#$%*^&() 등 영문 소/대문자가 아닌
다른 특수문자가 들어갈 경우에,
또 다시 '아이디를 다시 입력해주세요' 라는 문구가 나와야 한다!

step # 2

버튼 onClick 했을때

• 버튼에 onClick={this.Mainvaild} 함수
• Mainvaild 함수를 콜백 함수로 조건

• loginId 를 this.state 로 선언을 해주어 비구조할당을 해줬다

• 정규표현식으로 영문 소/대문자를 상수 에 담았다. (구글링을 통해...)

  정규 표현식 상수는 네이밍을 의미 있게 대문자로 하는게 좋다고
  성훈님께서 리뷰를 남겨줘서 재 빠르게 반영하였다 !
  다른 사람이 볼 때 알아 볼 수 있을까?ㅎㅎ
  id 정규표현식에 id가 숫자/영문만 포함 할 경우의 표현식이다

• 헷갈리지 않게 메모!!
  idCheck 는 여기서 함수를 지정 안해줘도 set에서
  바로 boolean 을 사용 할 수 있다

조건 1)

id가 공백일 경우에 setState 로 불리언값을 true 로 설정해주면
boolean 값이 set 에서 업데이트 된다.
그럼 공백일 경우에 원하는 로직으로 구 할 수 있겠다.

조건 2)

이 test()메서드는 정규식과 지정된 문자열 간의 일치 항목을 검색한다
라고 공식문서에 적혀 있다.
그럼 위에 선언 한 변수 regEx 에서 test 를 사용하고
메서드 안에서 loginId 를 할당 한 후 바로 setState 를 업데이트 !
정규 표현 형태가 false 일 경우에 아무 값도 안나오게
반대로, true 일 경우에 '아이디를 다시 입력해주세요' 라는 텍스트가 나와야겠다

• id <Input /> 아래에 자바스크립트로 선언하면
  && 연산자로 형식에 맞지 않으면 "문구" div로 넘어 온다.
  div를 쓰지 않아도 grid속성을 넘어온걸 알 수 있다.

{idCheck && "아이디를 다시 입력해주세요."}

ID 정규식표현 검사 !

1. 조건이 맞으면 아무값도 나오지 않게 구현 성공 ~
2. 조건이 틀릴 경우 텍스트가 red색상으로

---

Pw 조건 기능 구현

• pw 8자 이상 조건
  조건이 맞으면 빈값 출력,
  그렇지 않다면 '비밀번호 입력하세요' red 텍스트로 출력
  <div> 쓰지 않고 가능하다 !

코드를 살펴보자

const {password} = this.state

state를 password: '' 빈값을 준 상태에서
버튼 핸들링 함수 안에 id 처럼 조건에 할당시켜준다 !

if(password.length >= 8){
	this.setState({pwCheck: false});  
}else{
	 this.setState({pwCheck: true});
}

아이디의 길이가 8자 이하 이면 pwCheck 가 false
이상이면 true

• pw <Input/> 밑에 자바스크립트로 div 대신 써준다.

{pwCheck ? "비밀번호를 입력해주세요" : ""}

• pwCheck가 set에서 true false 를 지정 했기 때문에,
  false 일 경우 앞에 조건문 true일 경우 공백

---

🤟

비밀번호는 생각보다 간단하다.
하나하나 차근차근 하면 할 수 있는 것들인데
뇌가 정지되면 잠깐 나갔다오자 ㅎ_ㅎ