Mission 1) Login | 사용자 입력 데이터 저장

다음의 순서에 맞게 코드를 작성하여 ID, PW <input>에 입력된 값을 state 에 저장해주세요.

1. ID <input> 에서 onChange event 발생
2. event 발생 시 handleIdInput 함수 실행
3. handleIdInput 는 이벤트를 인자로 받음
4. event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장
5. 위의 과정을 PW <input> 에도 동일하게 적용

1. ID <input> 에서 onChange event 발생

<input> 태그 안에 onChange={} 이벤트를 삽입한다.

<input type="text" className="westaID" name="userID"  placeholder="전화번호, 사용자 이름 또는 이메일" onChange={} required />

2. event 발생 시 handleIdInput 함수 실행

LoginHaeYongLee() 함수 안, return 바깥에서 handleIdInput 함수를 실행해주며 state를 사용하기 위해 id와 setId를 state 해준다.

const [id, setId] = useState('');

function handleIdInput = event => {
  setId(event); 
};

3. handleIdInput 는 이벤트를 인자로 받음

<input> 태그 안에 handleIdInput 함수를 설정해줬으므로onChange={handleIdInput} 이벤트를 삽입한다.

<input type="text" className="westaID" name="userID"  placeholder="전화번호, 사용자 이름 또는 이메일" onChange={handleIdInput} required />

4. event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장

setId의 값으로 (event.target.value) 를 state에 저장해준다.

function handleIdInput = event => {
  setId(event.targe.value); 
};

5. 위의 과정을 PW <input> 에도 동일하게 적용

  const [pw, setPw] = useState('');

  const handlePwInput = event => {
    setPw(event.target.value);
  };

	return (
  	<input type="password" name="userPassword" className="westaPW" placeholder="비밀번호" onChange={handlePwInput} required />
	);

console.log로 확인

참고 및 출처
https://velog.io/@bboyooning/React-Login-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9E%85%EB%A0%A5-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%80%EC%9E%A5