Router/ fetch

Router?

: Routing은 페이지 이동을 의미한다. 하지만 리액트에서는 라우팅이 내재되어있지 않아서 npm install react-router-dom --save 라는 명령어로 설치한다.

import React from 'react';는 react패키지에서 React를 임포트한다.
import {BrowserRouter as Router , Route, Switch } from
"react-router-dom"
**routes.js에서 설정해준다.

Routes.js
Router
Switch
Route exact path="/" component={Login}/>
Route exact path="/main" component={Main}/>
/Switch>
/Router>

• Link Component
  : 누르면 바로 이동해서 넘어가도록 해준다.

  import {Link} from 'react-router-dom';
  <button

    <Link to='/main'>링크 컴포넌트</Link>
  //link태그는 a링크로 변환된다.

  </button

• HOC(Higher Order Component)
  :

  handleToMain = () =>{
  alert("메인페이지로 이동");
  this.props.history.push("main");
  //props의 디폴트 속성인 history가 있는데 main으로 이동시켜준다.
  이걸 사용하면 바로 가는게 아니라 함수를 통해서 flow대로 동작하면서
  main페이지로 이동된다.
  };

  <button onClick={this.handleToMain}어려운버전</button
  마지막 export 할때 export default withRouter(Login);

• fetch
  : API와 통신하려고 fetch함수를 사용하고 양방향으로 토큰을 주고받는다.

  fetch('http://localhost:8000/login/', {
  method: 'POST',
  headers: {
  'Content-Type': 'application/json',
  },
  body: JSON.stringify({
  'id': 'kim',
  'password': '1234'
  })
  })
  .then(response => response.json()) //json형태를 js로 읽도록 해주고
  .then(response => { //그럼 여기 res는 js형태여서 사용하게된다.
  if (response.token) { //res객체형태인데 res안에 토큰의 key값에 등록되면
  localStorage.setItem('token', response.token);
  //로컬스토리지에 set아이템을 사용해서 "token"라는 키값에 담아준다.
  //token는 우리가 정할수있다.
  this.props.history.push("/main");
  }else if(!response.token){
  alert("올바른 사용자가 아니다");
  this.props.history.push("/signup");
  }
  })
  : fetch함수 부분에 api주소와 메소드 방식, 컨텐트 타입 방식등 객체형태

  • body: JSON.stringify({
    'id': 'kim',
    'password': '1234'
    })
    : JSON 타입으로 바꾸는 문법