오늘 구현한 것들을 마구잡이로 적어본다.
로그인 버튼 활성화 구현
아이디에 @가 들어가거나 비밀번호가 5개 이상일 경우 로그인 버튼이 활성화 되는 것을 구현하였습니다.
그리고 아이디에 값만 들어가 있거나 비밀번호에만 값이 들어가있는 경우에 메인으로 넘어가는 것을 막았습니다.
두 값이 모두 정확히 들어갔을 때만 메인에 들어갈 수 있게 로직을 구현하였습니다.
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './LoginHyeri.scss';
function LoginHyeri() {
const navigate = useNavigate();
const goToMain = () => {
if (idValue.includes('@') && pwValue.length >= 5) {
navigate('/main-hyeri');
} else {
alert('가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.');
}
};
// 버튼 구현
let [active, setActive] = useState(false);
let [idValue, setIdInput] = useState('');
let [pwValue, setPwInput] = useState('');
console.log(idValue);
console.log(pwValue);
const ActiveIsPassedLogin = () => {
return idValue.includes('@') && pwValue.length >= 5
? setActive(true)
: setActive(false);
};
const handleId = e => {
setIdInput(e.target.value);
};
const handlePw = e => {
setPwInput(e.target.value);
};
return (
<>
<section className="login">
<form action="" method="post" className="loginForm">
<h1>Westagram</h1>
{/* <InputHyeri /> */}
<div className="idForm">
<input
type="text"
id="id"
name="id"
placeholder="전화번호, 사용자 이름 또는 이메일"
onKeyUp={ActiveIsPassedLogin}
onChange={handleId}
/>
</div>
<div className="passForm">
<input
type="password"
id="pw"
name="pw"
placeholder="비밀번호"
onKeyUp={ActiveIsPassedLogin}
onChange={handlePw}
/>
</div>
<button
type="button"
onClick={goToMain}
name=""
className={active ? 'activeLoginBtn' : 'loginBtn'}
disabled={idValue === '' || pwValue === '' ? true : false}
>
로그인
</button>
<div className="bottomText">비밀번호를 잊으셨나요?</div>
</form>
</section>
</>
);
}
export default LoginHyeri;무언가 비교할 때는 꼭 원래 값을 써야합니다.
console.log를 자주 이용해야한다.
let [active, setActive] = useState(false);먼저 [active, setActive] 를 만들어놓는다. 첫번째 들어가는 게 현재값이고, 두번째 들어가는 값이 변하는 값이다. useState(false)로 false를 초기값으로 잡아놓는다. 한마디로 지금 버튼은 비활성화 된 상황이 초기값이 되는 것이다. (이거 잘 모르겠으니까 나중에 물어보기)
let [idValue, setIdInput] = useState('');
let [pwValue, setPwInput] = useState('');idValue값과 pwValue 의 초기값을 빈 문자열로 잡아놓는다.
const ActiveIsPassedLogin = () => {
return idValue.includes('@') && pwValue.length >= 5
? setActive(true)
: setActive(false);
};그리고 ActiveIsPassedLogin 화살표 함수로 만들어줍니다. 화살표 함수는 return을 해줘야합니다.
아까 비교할 때는 현재값을 비교해야한다고 했었던걸 기억해주시길 바랍니다. inValue.includes 메서드를 사용하여 (.includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.) @ 가 포함되어 있고, pwValue의 length가 5보다 같거나 크면 참일경우 setActive(true)를 실행하고, 아니면 false를 실행하기.
const handleId = e => {
setIdInput(e.target.value);
};
const handlePw = e => {
setPwInput(e.target.value);
};e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어올 수 있습니다.
화살표 함수에 매개변수 자리에 e를 놨으면 똑같이 e로 적어야 합니다. event라고도 적을 수 있습니다.
그리고 각각의 input에
ID input에는
onKeyUp={ActiveIsPassedLogin}
onChange={handleId}
PW input에는
onKeyUp={ActiveIsPassedLogin}
onChange={handlePw}
이렇게 적용을 합니다. onKeyUp은 '사용자가 키보드의 키를 눌렀다가 땠을 때' 고, onChange는 '작성한 JS를 통해 변화가 일어났는지를 감지합니다. input 의 텍스트 값이 바뀔때마다 발생하는 이벤트입니다.'
const goToMain = () => {
if (idValue.includes('@') && pwValue.length >= 5) {
navigate('/main-hyeri');
} else {
alert('가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.');
}
};
<button
type="button"
onClick={goToMain}
name=""
className={active ? 'activeLoginBtn' : 'loginBtn'}
disabled={idValue === '' || pwValue === '' ? true : false}
> 로그인
</button>로그인 버튼을 구현한 코드입니다. onClick (클릭이 되면) {goToMain}을 실행시켜라 인데. if문으로 조건이 맞으면 /main-hyeri 로 가라는 것입니다. 아니라면 alert로 '가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.' 알람이 뜨게끔 합니다.
그리고 className을 active(조건)이 참이면 'activeLoginBtn'을 실행하고 (참고로 진한 파랑색이 scss로 설정되어있습니다.) 아니라면 'loginBtn' (연한파랑색) 이 실행되라는 삼항 연산자 입니다. 색을 나타내는 코드입니다. className에 두가지의 이름이 있는데. 이 이름들로 scss에서 css를 적용시킬 수 있습니다.
disabled={idValue === '' || pwValue === '' ? true : false}disabled 속성은 해당 요소가 비활성화 되는 것을 의미합니다. 그리고 Boolean 속성입니다. inValue나 pWValue가 빈문자열일 때 true를 실행하라 그니까 '버튼을 비활성화'시켜라. 라는 뜻입니다. 만약 둘 다 채워진 상태라면 false가 실행되어 활성화가 될겁니다.
모르는거 바로바로 멘토님께 물어보자. 내일도 정리 또 정리하자.
물어볼 거 : 코드리뷰 하면서 동기들에게 물어보기 disabled 속성이 불리언 값인데 그러면 삼항연산자에 무조건 true/ false 값만 쓸 수 있는지
