https://github.com/wecode-bootcamp-korea/bang_olaf-frontend/blob/main/src/Pages/Account/Account.js
회원가입 페이지 기준
text type input
checkbox type input
onClick을 통해 true or false를 점검하는 동시에 msg 컨트롤하는 state(${name}hasValue
)도 같이 업데이트(setState 활용)
⇒ 같이 업데이트 하는 이유
${name}hasValue
는 단지 처음 load할 때, msg가 화면에 뜨지 않게 할 뿐, 이 후부터는 [name]과 같은 값을 담는다.
// 1. text인풋 onChange 메소드
handleInput = (e) => {
const { name, value } = e.target;
this.setState(
{
[name]: value, // 1-(1). value 값 입력
},
() => this.checkValidity(`${name}hasValue`, this.state[name]), // 1-(2). [콜백 함수] 메소드 연결
);
};
// 1-2. 인풋 값 유무 및 이메일/비번/비번확인 조건식 업데이트
checkValidity = (keyValue, inputValue) => {
const { email, password, checkPw } = this.state;
// input 유형 2 : email의 추가 validation (정규 표현식)
const emailcheck = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i.test(
email,
);
// input 유형 2 : password의 추가 validation (정규 표현식)
const passwordcheck = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(
password,
);
// input 유형 2 : checkpw의 추가 validation (password와 일치)
const checkpwcheck = password === checkPw;
this.setState({
[keyValue]: inputValue.length > 0, // input 유형 1 : 값 유무만 체크 (text)
emailcheck,
passwordcheck,
checkpwcheck,
});
};
// 1. checkbox인풋 onClick 메소드
handleCheckbox = (e) => {
const { name, checked } = e.target;
this.setState({
[name]: checked, // input 유형 1 : 값 유무만 체크 (checkbox)
[`${name}hasValue`]: checked, // [name] & [`${name}hasValue`] 동시 체크
});
};
[e.target.name]: e.target.value or e.target.checked
[e.target.name]hasValue
state
기능
의미
해당 input에 값이 있는가?
msg 가림막
처음 화면 load될 때, input이 빈 값이어도 msg가 뜨지 않게 해줌.
msg 컨트롤
키 값:
true ⇒ msg 안 보임
false ⇒ msg 보임
text vs checkbox
input
3가지 input 유형
1. 값 입력 또는 체크만 하면 되는 input
input : 이름, 성, 서비스 동의
text
input
[keyValue]: inputValue.length > 0
→ ${name}hasValue
: this.state[name]
의 값이 있으면 true
checkbox
input
this.setState({
[name]: checked,
[`${name}hasValue`]: checked,
})
2. 값 입력 외 추가 validation이 있는 input
3. 필수 입력이 아니지만 체크 시 back에 정보를 전송 해야 하는 input
Account.js
<div className="email accountTextInput"> <p>이메일</p> <div className={`checkemail ${email && "success"}`}> // 1. scss로 컨트롤 <input type="text" name="email" onChange={this.handleInput} /> <p className="warningMsg"> {!emailcheck && ( // 2. <p className="warningMsg"> 유효한 이메일 형식이 아닙니다. </p> )} </p> </div> {!emailhasValue && ( // 3. <p className="warningMsg">이메일은 필수 입력 항목입니다.</p> )} </div>
Account.scss
.checkemail { p { display: none; } &.success { p { display: block; } } }
1~2. className으로 msg 출현 결정하는 div
email 값 들어오기 전
className = checkemail
p 태그
display: none;
email 값 들어온 후
className = checkemailsuccess
p 태그
display: block;
emailcheck 점검 (조건부 렌더링 활용)
true일 때
안보임
false 일 때
msg 보임
3. 값의 유무(emailhasValue)에 따라 msg 출현
조건부 렌더링 활용
2차 조건문 확인 div(className = checkemail
) 밖에 존재
→ ${email && "success"}
에 대한 영향 받지 않기 위해
// button의 onClick 메소드
handleBtn = () => {
const {
firstname,
lastname,
email,
emailcheck,
password,
passwordcheck,
checkPw,
checkpwcheck,
serviceagreement,
} = this.state;
// [변수] 모든 조건 일치 여부 검사
const allAcceptedAccountCondition =
firstname &&
lastname &&
emailcheck &&
passwordcheck &&
checkpwcheck &&
serviceagreement;
// 3-1. 모든 조건 미일치 시
if (!allAcceptedAccountCondition) {
//alert("allAcceptedAccountCondition 실패");
// 3-2. 인풋 창 Warning Msg 나타내기 위한 코드
this.setState({
firstnamehasValue: firstname,
lastnamehasValue: lastname,
emailhasValue: email,
passwordhasValue: password,
checkPwhasValue: checkPw,
serviceagreementhasValue: serviceagreement,
});
} else {
// 3-1. [메소드 실행] 모든 조건 일치 시 fetch함수 실행
this.fetchSignup();
}
};
[변수] 모든 조건 일치 여부 검사
2차 조건이 있는 input은 2차 조건 실행 여부를 담은 state로 검사
→ 값이 있어야 조건 실행 가능
→ [name]hasValue
생략
3-1. [메소드 실행] 모든 조건 일치 시 fetch함수 실행
3-2. 인풋 창 Warning Msg 나타내기 위한 코드
문제
[name]hasValue
의 기본값: true
→ [name]hasValue
에 따른 msg가 나오지 않음
해결
실제 값을 넣은 state를 통해 검사
참고
2차 조건의 msg
이미 msg가 나와있다.
how?
onChange에서 걸린 validation 검사 메소드로 msg가 나와 있고 값을 입력했기에 [name]hasValue
가 true가 되어 setState가 필요 없음