<aside> 💡 Fetch의 개념이 궁금하다면 👉 Fetch 함수(세션 진행 정리)

</aside>

사이트 api Fetch의 자바스크립트 코드 👉 리액트화

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;