. App.js
//import './App.css';
import { Component } from 'react';
import StateExample from './03/StateExample';
import Mypage from './03/Mypage';
import Login from './03/Login';
class App extends Component {
constructor(props){
super(props);
this.state = {
isLogin: false,
count: 0,
userId: "simwj227",
userEmail: "simwj0227@gmail.com"
};
this.loginHandler = this.loginHandler.bind(this);
this.setUerInfo = this.setUerInfo.bind(this);
}
loginHandler(){
const {isLogin} = this.state;
this.setState({
isLogin: !isLogin,
});
};//loginHandler
setUerInfo(info){
const {userId, userEmail} = this.state;
console.log("infor's: ", info.userId, info.userEmail);
console.log("state' email: ",this.state.userEmail);
this.setState({
userId: info.userId,
userEmail: info.userEmail,
});
}
render(){
const {isLogin, userId, userEmail} = this.state;
!isLogin && setTimeout(() => this.loginHandler(),2000);
!isLogin && setTimeout(() => this.setUerInfo(
{userId: "gdHong", userEmail: "gdHong@naver.com"}),4000);
return(
<div>
<button onClick={this.loginHandler}>
update
</button>
{isLogin ? <Mypage userData={this.state} /> : <Login /> }
</div>
);
}
}
export default App;
.Mypage.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Mypage extends Component {
render() {
const userData = this.props.userData;
return (
<div>
<span>MyPage<button value={false}>logout</button></span>
<hr></hr>
<p>안녕하세요 로그인이 완료되었습니다.</p>
<p>나의 유저 네임: {userData.userId}</p>
<p>나의 이메일 주소: {userData.userEmail}</p>
</div>
);
}
}
export default Mypage;
.
StateExample.js
import React, { Component } from 'react';
class StateExample extends Component {
constructor(props){
super(props);
this.state = {
loading: true,
formData: 'no Data',
count: 0,
};
this.increaseCount = this.increaseCount.bind(this);
this.handleData = this.handleData.bind(this);
setTimeout(this.handleData, 4000);
//setInterval(this.handleData, 1000);
}
handleData(){
const data = 'new data, ';
//this.state.count = this.state.count+1;
const { loading, formData } = this.state;
//state변경
this.setState({
count : this.state.count + 1,
loading: !loading,
formData: data + formData,
});
//this.state.loading은 현재 true입니다.
console.log('loading값', this.state.loading);
//이후 호출될 render()함수에서의 this.state.loading은 false입니다.
}
increaseCount(){
this.setState({
count : this.state.count + 1,
loading : !this.state.loading,
});
}
render() {
return (
<div>
{/* state 데이터는 this.state로 접근가능합니다. */}
<span>Loading: {String(this.state.loading)}</span>
<br></br>
<span>Result: {this.state.formData}</span>
<br></br>
<span>Count: {this.state.count}</span>
<br></br>
<button onClick={this.increaseCount}>
count update
</button>
</div>
);
}
}
export default StateExample;
.
.
.
.
.
.
.