.png)
오늘은 리액트 라이브러리를 통해 Component를 구성하고, Coponent의 state를 이용하여 로그인 버튼이 활성화 되는 이벤트를 구현해보았다.
1. 컴포넌트 정의 state 객체 초기값 주기
먼저 state란 말그대로 component의 상태에 대한 정보를 담고 있는 객체이다.
아래와 같이 LoginJ라는 이름으로 클래스형 컴포넌트를 정의했다.
React 컴포넌트 class를 정의하려면 React.Component를 상속(extends)받아야 한다.
Login.js
import React, { Component } from 'react';
// import {Link} from 'react-router-dom';
import "./LoginJ.scss";
class LoginJ extends Component {
constructor(){
super();
this.state ={
idInputData : "",
pwInputData : "",
btnColorState: false,
}
}컴포넌트에 state는 constructor() 생성자 함수, super는 부모클래스의 생성자를 의미합니다.
부모 클래스라하면 우리가 상속받고 있는 React.Component 클래스를 의미합니다.
그렇기 super()함수를 호출하지 않으면 this 키워드를 사용할 수 없기 때문에 필요합니다.
2. 컴포넌트 내에 함수 정의
goTomain = () =>{
this.props.history.push('/MainJ');
}
handleIdInput = (event)=>{
// console.log(event.target.value);
this.setState({
idInputData :event.target.value,
})
}
handlePwInput = (event)=>{
// console.log(event.target.value);
this.setState({
pwInputData :event.target.value,
})
}event를 인자로 함수에 보내주고 setState메소드를 통해 idInputData(키)에 이벤트가 발생했을 때의 값(event.target.value)을 할당한다. 아이디와 비밀번호를 각각의 메소드로 만들어 state의 값을 변경해줬다.(동일한 기능을 하는 함수 이기 떄문에 추후에 리팩토링을 하고싶다)
render() {
// console.log(this.state.);
console.log("btnColorState:"+this.state.btnColorState);
return (
<div className="Login_container">
<div className="login_box">
<div className="logo">
<h1>westagram</h1>
</div>
<section className="login_form">
<input className="login_id" onChange={this.handleIdInput} onKeyUp={this.btnChangeColor} type="text" placeholder="전화번호,사용자 이름 또는 이메일" />
<input className="login_pw" onChange={this.handlePwInput} onKeyUp={this.btnChangeColor} type="text" placeholder="비밀번호" />
login_id input태그에 onChange 이벤트를 발생시켰고 자바스크립트{}안에 this.handleIdInput(해당 컴포넌트(this)의 위에서 정의한 함수 handleIdInput를 실행시킨다) 이와 같이 아이디와 패스워드에 들어온 값을 state에 넣어주었다.
3. 아이디,비밀번호 입력 조건에 따라 로그인 버튼 컬러 변경
조건 1) 아이디 값은 이메일이므로 @ 가 포함되어야 한다.
조건 2) 비밀번호의 길이는 5글자 이상이여야 한다.
btnChangeColor = ()=> {
(this.state.idInputData.includes("@") && this.state.pwInputData.length>=5)?
this.setState({btnColorState : true,}):this.setState({btnColorState : false,})
}삼항연산자와 includes메서드 (문자열에 해당 문자가 포함되었는지 여부를 boolean 값으로 보내준다). 아이디 입력 값(this.state.idInputData) 에 @이 포함되고 && and연산자, 비밀번호 입력 값의 길이가 (this.state.pwInputData.length) 5이상 이면 {btnColorState가 true} 아니면 false를 할당한다.
불리언 값이기 때문에 이 부분도 리팩토링 더 가능한 부분인데 추후에 리팩토링 할 예정이다!
<section className="login_form">
<input className="login_id" onChange={this.handleIdInput} onKeyUp={this.btnChangeColor} type="text" placeholder="전화번호,사용자 이름 또는 이메일" />
<input className="login_pw" onChange={this.handlePwInput} onKeyUp={this.btnChangeColor} type="text" placeholder="비밀번호" />
keyUp 이벤트에 btnChangeColor 함수가 실행되도록 하고,
<button className={"login_btn " + (this.state.btnColorState? 'onColor':'offColor')} type ="button" onClick={this.goTomain}>로그인</button>
버튼의 클래스 이름을 기존에 있던 login_btn에 추가로 this.state.btnColorState가 true 이면 클래스 이름이 onColor
false 이면 offColor로 변하도록 했다.
.onColor {
background-color: blue;
}
.offColor {
background-color: #B2DFFC;
}다중 className 주는 방법
자바스크립트 문법{} 중괄호 내에서 기존 문자열로 주었던 클래스 명에 "login_btn " 마지막에 공백 하나를 넣어주고 + 연산자를 통해 ((this.state.btnColorState? 'onColor':'offColor')) 연결해줄 수 있다.
(리액트에서 clasName을 다중으로 주는 방법을 찾는데 오래 걸렸는데 구글링을 잘 해야 겠다는 생각을 다시 한번 했다....)
다음에는 리팩토링 해서 다시 코드를 올리려 한다.
