react login 기능 구현하기

1. login | 사용자 입력 데이터 저장


handleInput 함수를 사용해서 even 발생시 함수가 실행되어서
input에 id pw 가 영향이 가는 구조이다.
event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장
onchange 써서 id와 pw input 에 event 위치를 지정함

2. Login | 로그인 버튼 활성화 (validation)
입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.
ID - @ 포함 / PW - 5글자 이상

button scss 변경

• 선택자를 클래스 "btnLogin"에서 "button" 태그로 변경
  버튼을 눌렀을때랑 안눌렀을때 두가지 상황을 scss를 적용해야 되서
  button 태그로 선택자를 지정함
  

* 삼항연산자 사용

1. 삼항 연산자 사용해서 아이디와 비밀번호 두가지 조건이
   성립했을때만 버튼이 활성화 되게 지정

• 삼항연산자 : 조건문 ? 참일때 실행할 식 : 거짓일때 실행 할 식
• index of() : 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환, 일치하는 값이 없으면 -1을 반환
  id input에 @가 들어 있는지 존재 여부를 확인하기 위해서 index 0f() !== -1 식을 사용함

처음에는 (1) 처럼 작성했다가 중복된 내용을 줄여서 짧게 쓰는 법을 알게 되어서 (2)으로 수정함

(1)

(2)

변수로 활성화 될때 조건을 앞에서 미리 조건식을 선언해 주고
버튼 부분에 삼항연산자 사용해서 참과 거짓일때 식을 써주는 방법도 있어서 (2)를 사용했다.