React - 로그인 기능 구현하기

📚구현 목표

---

- 사용자 입력 데이터 저장

- 로그인 버튼 활성화

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

1) 우선 useState를 이용해 아이디와 패스워드의 초기값을 공백으로 지정해주었다.

let [id, setId] = useState('');
let [pw, setPw] = useState('');

2) setId와 setPw를 이용하여 input값이 변할 때(onChange) 각 input창에 력되는 내용이(e.target.value)값이 각 id와 pw에 담기도록 했다.

 <input 	
	placeholder="전화번호 사용자 이름 또는 이메일"
    id="id"
    className="login"
	onChange={e => {
    setId(e.target.value);
	}}
    onKeyUp={changeButton}
	/>
<input
	type="password"
	placeholder="비밀번호"
	id="password"
	className="login"
	onChange={e => {
     setPw(e.target.value);
	}}
    onKeyUp={changeButton}
	/>

2. 로그인버튼 활성화

1) 유효성 검사를 실행해 조건을 통과할 경우 로그인 버튼활성화

const [button, setButton] = useState(true);

  function changeButton() {
    id.includes('@') && pw.length >= 5 ? setButton(false) :setButton(true);
  }

아이디에 '@'가 포함되어 있고, 비밀번호가 5자리 이상일 때 로그인버튼이 활성화되는 기능을 구현해 보자!

button이라는 state를 먼저 만든 후 setButton을 통해 button의 값을 조건식이 맞을 때 false, 조건식이 맞지 않을 때 true로 변경해주는 함수를 만들었다.

 <input 	
	placeholder="전화번호 사용자 이름 또는 이메일"
    id="id"
    className="login"
	onChange={e => {
    setId(e.target.value);
	}}
    onKeyUp={changeButton}
	/>
<input
	type="password"
	placeholder="비밀번호"
	id="password"
	className="login"
	onChange={e => {
     setPw(e.target.value);
	}}
    onKeyUp={changeButton}
	/>

아이디와 패스워드의 input창에서 keyUp이벤트가 발생할 때(onKeyUp) 위에서 만들어준 changeButton함수가 실행되도록 넣어주었다.

const goToMain = () => {
    navigate('/main-yejee');
  };

메인페이지로 이동하는 함수를 먼저 만들어주었다.

const realId = "kiki@naver.com";
const realPw = "12345678";

<button
	type="button"
	className="loginButton"
	disabled={button}
	onClick={e => {
              if (realId == id) {
                if (realPw == pw) {
                  e.stopPropagation();
                  goToMain();
                }
              } else {
                alert('아이디 혹은 비밀번호가 일치하지 않습니다.');
              }
            }}
>

button의 값이 true이면 disabled가 작동되고, button의 값이 false일 떄는 disabled가 작동되지 않도록 disabled={button}을 넣어주었다.

아직 백엔드와 통신하지 않기 때문에 realId와 realPw라는 변수에 임의로 값을 지정해주고 실제 input값과 내가 변수에 저장해 둔 값이 일치할 경우에만 main페이지로 이동하도록 goToMain함수를 실행해주었다.

2) 로그인 버튼 활성화/비활성화에 따른 버튼 색상 변경

처음에는 버튼 비활성화를 위한 state와 색상변경을 위한 state 각 1개씩 총 두 개의 state를 만들었는데,css 속성 중에 disabled라는 속성이 있었다.

.loginButton {
    margin-top: 10px;
    padding: 0;
    width: 250px;
    height: 30px;
    border: none;
    background-color: #0095f6;
    color: white;
    font-size: 17px;
    border-radius: 5px;

    &:disabled {
      background-color: rgba(0, 149, 246, 0.3);
    }
  }

기본 색상을 #0095f6로 지정하고, 버튼이 disabled될 때 rgba(0, 149, 246, 0.3)로 바뀌도록 설정해주었다.