동적 라우팅 실제 플로우 정리(&로그인 관련기능)

종합적인 라우팅 이해의 숲

• detail/:id
• category/:id
  이런식으로 엔드포인트에 :id로 끝나게 해주는 거라고 한다.
  그러면 /1~32492332432까지 올수 있구나.
  그리고 그걸 해당 컴포넌트에서 Link+ 직접 넣던지, Link+ 변수로 넣던지 하는거?
  (이거야 간단하지만, 전체적인 이해 삼십프로)
• this.props.

로그인 관련

• 페이지들에서 {setItem: sessionstorage 조회를 해서, ? 로그인/로그아웃} 이렇게 구성해야 함.
• 마이페이지에서는 conponentdidmount에다가 fetch 헤더에 token을 넣어 유저인증을 하는게 맞나? 그래서 맞아야 렌더링 해주는거라면, 처음 렌더링 시작하기 전에 해줘야 하는거 아님?

Routes.js 코드- 상위페이지

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Signup from "./Pages/SingUp";
import Cart from "./Pages/Cart";
import Category from "./Pages/Category";
import Detail from "./Pages/Detail";
import Login from "./Pages/Login";
import Main from "./Pages/Main";
import Mypage from "./Pages/Mypage";

class Routes extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/cart" component={Cart} />
          <Route exact path="/category/:id" component={Category} />

          <Route exact path="/detail/:id" component={Detail} /> 
          <Route exact path="/login" component={Login} />
          <Route exact path="/main" component={Main} />
          <Route exact path="/mypage" component={Mypage} />
          <Route exact path="/signup" component={Signup} />
        </Switch>
      </Router>
    );
  }
}

export default Routes;

detail.js : 하위컴포넌트

import React, { Component } from "react";

class Detail extends Component {
  componentDidMount() {
    const id = this.props.match.params.id;

    console.log(id);

    // fetch -> id
  }
  render() {
    return <div>{this.props.match.params.id} product detail</div>;
  }
}

export default Detail;

Category.js

import React, { Component } from "react";

import { Link } from "react-router-dom";

class Main extends Component {
  // handle =() {
  //     console.log
  //     // fetch("" , {
  //     //     method:post,
  //     //     headers: {
  //     //         Authorization: 'asldfkjlsakdjfalsjf',
  //     //     },
  //     //     body: 'json.string=fity keykey:noah'
  //     //     }

  //     // })
  //     // .then(res =>)
  //     // .then(res => consol. history/push/)

  //     // localStorage.delete.(key:vals)
  // }
  render() {
    const productId1 = 1;
    const productId2 = 2;
    const token = "assdf";

    return (
      <div>
        {token ? <div>log out</div> : <div>log in</div>}
        <div>로그아웃</div>
        {/* <div onClick={handle}>로그아웃</div> */}
        <Link to={`./category/${productId1}`}>
          <span>음식/</span>
        </Link>
        <Link to={`./category/${productId2}`}>
          <span>디저트</span>
        </Link>
        product1
        <button>
          <Link to={`./detail/${productId1}`}>상세페이지</Link>
        </button>
        product2
        <button>
          <Link to={`./detail/${productId2}`}>상세페이지</Link>
        </button>
      </div>
    );
  }
}

export default Main;

Mypage.js

import React, { Component } from "react";

class Mypage extends Component {
  async componentDidMount() {
    // fetch token
    const localStorage = { keykey: 'noah' };
    const response = await fetch("http~~", {
      method: "POST",
      body: localStorage['keykey'],
    }).then(res => {
        return res.json();
    }).then(res => {
        // res: {
        //  name: 'mimi',
        //  age: 16,
        //  information: 'blah blah',
        //}
    });
  }
  render() {
    return <div>Mypage Mypage</div>;
  }
}

export default Mypage;