출저
- 위코드 강의자료
- MDN
- id (@ 가 있는지) : onChange
- pw (4자리 이상인지) : onChange
- pw를 보이게
- input value가 한 글자 이상씩 있으면 버튼 활성화
- 버튼 클릭했을 때 validation check : onClick
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
//초기화 상태
message : "",
colorId : false,
colorPw : false,
}
}
goToMain = () => {
this.props.history.push('/Main');
}
handleId = (e) => {
if (e.target.value.indexOf('@') === -1) {
this.setState({
message : "올바른 이메일 주소를 입력하시라구욥!",
colorId : false
})
} else {
this.setState({
message : "",
colorId : true
})
}
}
handlePw = (e) => {
if (e.target.value.length < 6) {
this.setState({
message : "6자리 이상 누르시라구욥!",
colorPw : false
})
}
else {
this.setState({
message : "",
colorPw : true,
})
}
}
render() {
return (
<div className="Login">
<div>Westagram</div>
<form>
<input
className="loginId"
onChange={this.handleId}
type="email"
placeholder="이메일 주소"/>
<input
className="loginPassword"
onChange={this.handlePw}
type="password"
placeholder="비밀번호"/>
<p>{this.state.message}</p>
<button onClick={this.goToMain}
style={this.state.colorId && this.state.colorPw ? {backgroundColor:"blue"} : {backgroundColor: "yellow"}}>로그인</button>
</form>
<div className="forgetQ">비밀번호를 잊으셨나요?</div>
</div>
)
}
}
class Login extends React.Component {
constructor() {
super();
this.state = {
//초기화 상태
id : "",
pw : "",
hiddenPw : true,
}
}
handleValue = (e) => {
//구조분해 할당
const {id, value} = e.target;
this.setState({
[id] : value,
})
}
showHide = () => {
this.setState({
hiddenPw : !this.state.hiddenPw,
})
}
validationCheck = (e) => {
e.preventDefault()
const {id, pw} = this.state;
if (id.indexOf("@") === -1) {
alert("올바른 이메일주소가 아닙니다.")
}
if (pw.length < 5) {
alert("4자리 이상 입력하세요.")
}
if (id.indexOf("@") !== -1 && pw.length > 4) {
this.props.history.push('/Main');
}
}
render() {
//console.log(this.state)
const {id, pw, hiddenPw} = this.state;
const colorchangeBtn = id.length >= 1 && pw.length >= 1;
return (
<div className="Login">
<div>Westagram</div>
<form>
<input
className="loginId"
id="id"
onChange={this.handleValue}
type="email"
placeholder="이메일 주소"/>
<input
className="loginPassword"
id="pw"
onChange={this.handleValue}
type={hiddenPw ? "password" : "text"}
placeholder="비밀번호"/>
<span
onClick={this.showHide}>{hiddenPw ? "Show" : "Hide"}</span>
<button
onClick={this.validationCheck}
className={colorchangeBtn ? "activate" : ""}>로그인</button>
</form>
<div className="forgetQ">비밀번호를 잊으셨나요?</div>
</div>
)
}
}
구조 분해 할당 구문
은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.const {id, value} = e.target; // e.target.id, e.target.value 값으로 비구조할당. this.setState=({ [id] : value, }) => constructor 에 초기화해준 값들을 setState 에 객체로 다시 저장.
onChange={this.handleId}
onChange={() => this.handleId()}
const checkId = id.includes("a");