• onChange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줌.
• event 발생 시 handleInput 함수 실행
• handleIdInput은 이벤트를 인자로 받음
• event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장!
const [inputId, setInputId] = useState(''); //useState를 사용해서 변하는 값을 set함수로 받음
const [inputPw, setInputPw] = useState('');
const handleInputId = e => {
// input data에 변화가 있을때마다 value값을 변경해서 useState해줌
setInputId(e.target.value);
};
const handleInputPw = e => {
setInputPw(e.target.value);
};
value값을 가져오는 이유는 리액트의 경우 virtual DOM을 사용해서 일단 함수를 처음부터 끝까지 돌고 그 다음에 UI변경이 필요한 애들을 모아서 렌더링함. 그래서 한박자씩 늦음.(비동기화) 그래서 값을 실시간으로 받기 위해서 e.target.value를 사용해서 value값을 실시간으로 가져옴.
• ID - @ 포함 / PW - 5글자 이상 → 두가지 조건 다 만족해야 로그인 버튼 활성화
• 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화주기.
import { useNavigate } from 'react-router-dom';//메인페이지로 연결하기 위해 useNevigate Hook 사용
import React, { useState } from 'react';//useState로 값을 받아서 set함수로 값을 관리
import './LoginKy.scss';//Login.scss파일 연결해서 스타일 사용!
const LoginKy = () => {
const navigate = useNavigate();
const goToMain = () => {
navigate('/main-kyeongyeon');//조건이 만족해서 버튼을 누르면 main으로 넘어감
};
return( <div className="btnLogin">
<button
onClick={goToMain} //onClick이벤트 발생시 위에서 선언한 goToMain을 props로 받음
type="button"
id="activeButton"
disabled={
inputId.includes('@') && inputPw.length > 4 ? false : true
// disabled는 속성으로 기본값이 '아무것도 없을시 작동 안함'임.
//그래서 삼항 연산자를 사용해서 Id에 '@'있고, Pw의 길이가 4보다 크면
//기본값을 false로 해서 작동을 시킴.
}
>
로그인
</button>
</div>
)
와 정말 유익한 글이네요!