Login 화면 (데이터 저장, 버튼 활성화, 구조 분해 할당) 구현

구현 순서

1) 각각의 input 창을 통해 받은 ID, PW 값을 저장할 state 생성
2) input 창의 값 변화시 그 값이 state 에 반영 되도록 이벤트를 인자로 받는 함수 선언 후 onchange 이벤트 발생시 해당 함수 실행하도록 설정
3) ID, PW 각각의 입력창에서 특정 조건시 로그인 버튼 활성화 및 색변화를 위한 함수 선언
4) 로그인 버튼에 3에서 선언한 함수를 사용하여 className 값 변화에 따른 색깔 변경 및, disabled attribute 값 변경경 설정

중요 코드

handleInput = e => {
  this.setState({ [e.target.name]: e.target.value });
};

각각 다른 input 의 name 속성에 고유 값(=this.state 객체의 키 값)을 줌으로 써 하나의 함수를 같은 종류의
다른 두 태그에 적용 시킬수 있었습니다.

validation = () => {
  const { id, pw } = this.state;
  return id.includes('@') && pw.length > 4;
};

ID, PW 의 현재 값을 확인하여 조건에 적합한지 판별하는 함수

disabled={!this.validation()}

validation 의 리턴값이 false 일때 비활성화가 되야하므로 !를 주었습니다.

이것 만은 잊지말자

1) 이벤트가 발생한 태그를 특정 할 수 있는 방법이 다양한 것 같다. 이를 잘 활용 한다면 더 깔끔한 코드를 작성 할 수 있을 것 같다.
2) 구조분해 할당은 코드의 길이를 줄이는 좋은 수단 이지만, state 의 값이 업데이트 되는 시점과, 구조 분해 할당을 선언하는 시점에 따라 예상과는 다른 결과를 보게되는 경우가 있으므로 상황을 잘보고 사용해야 겠다.