<aside> 💡 Fetch의 개념이 궁금하다면 👉 Fetch 함수(세션 진행 정리)
</aside>
import React from "react";
import "./styles.css";
import { render } from "react-dom";
class App extends React.Component {
constructor(){
super();
this.state = {
categories: []
}
}
componentDidMount(){
fetch('<https://api.kurly.com/v2/categories>')
.then(res => res.json())
.then(res => {
this.setState({categories:res.data.categories})
})
}
render(){
console.log(this.state)
return(
<div className="App">
{this.state.categories.map(el => {
return <p>{el.name}</p>
})}
</div>
)
}
}
export default App;
import React, { Component } from 'react';
import logo from '../../logo_text.png';
import './Login.css';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email:'',
password:''
}
}
handleChange = (e) => {
this.setState({
[e.target.name] : e.target.value,
[e.target.name] : e.target.value
});
}
bntClass = (e) => {
return this.state.email.length > 0 && this.state.password.length > 0 ? 'cursorOn': '';
}
onClick = (e) => {
e.preventDefault();
fetch("<http://10.58.1.200:8000/account/sign-in>",{
method: "POST",
headers: {
"Content-Type":"application/json"
},
body:JSON.stringify({
"email":this.state.email,
"password":this.state.password
})
})
.then(response => {
return response.json()
})
.then(response => {
if(response.token){
localStorage.setItem("wtw-token",response.token)
}
})
}
render(){
return (
<div className="loginWrap">
<h1 className="loginLogo"><img src={logo} alt="인스타그램 로고"/></h1>
<ul className="loginList">
<li><input className="loginId" name="email" value={this.state.email} onChange={this.handleChange.bind(this)} placeholder="전화번호, 사용자 이름 또는 이메일" type="text"/></li>
<li><input className="loginPassword" name="password" value={this.state.password} onChange={this.handleChange.bind(this)} placeholder="비밀번호" type="password"/></li>
</ul>
<button onClick={this.onClick} className={`loginBtn ${ this.bntClass() }`} type="button" name="button">로그인</button>
<a className="pwdLink" href="<https://www.instagram.com/accounts/password/reset/>">비밀번호를 잊으셨나요?</a>
</div>
)
}
}
export default Login;