React - 쇼핑몰만들기(4)

구현하는 기능과 배우는 컨셉

✔ React Router 설치 & 셋팅
✔ BrowserRouter vs HashRouter
✔ 라우팅하기 (페이지 나누기)
✔ 메인페이지/상세페이지 Route에 내용 채우기

👉 React Router 설치 & 셋팅

yarn add react-router-dom

◾ yarn react-router-dom 설치
◾ index.js에서 HashRouter 등록

👉 BrowserRouter vs HashRouter

import { HashRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App/>
    </HashRouter>
  </React.StrictMode>
  document.getElementById('root')
);

◾ HashRouter를 복붙하시면 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작함
◾ BrowserRouter를 복붙하시면 사이트 방문시 # 등 없이 깔끔함

Q. URL이 #기호로 드러워지는 HashRouter를 왜쓸까?
◾ 원래는 브라우저 주소창에 뭔가 페이지를 입력하면 서버에게 특정 페이지좀 보여달라는 요청이 된다.
◾ 근데 우리는 요청할 서버가 없고 그냥 리액트가 라우팅을 담당하고 있음
◾ 그래서 잘못하면 있지도 않은 페이지를 서버에 요청을 해서 404 Page Not Found 이런 에러도 뜰 수있다.
◾ 실수로 서버에게 요청하지 않게 하려면 안전하게 #을 붙어야한다.
◾ 왜냐면 브라우저 주소창에서 # 뒤에 붙은 것들은 절대 서버로 요청되지 않기때문이다.

Q. 그럼 BrowserRouter는 안좋은건가?

◾ 그건 아니고 BrowserRouter를 쓰려면 서버에서 셋팅을 해야함
◾ 이런경로로 들어오는 요청은 404보내지말고, 라우팅하게해달라등등
◾ 이런 식으로 API를 짜놓으면 괜찮다.

👉 라우팅하기 (페이지 나누기)

import React, {useState} from 'react';
import Data from './data';
import {Link, Route, Switch} from 'react-router-dom';
import Detail from './Detail';
function App(){
  return (
    <div>
      HTML ...
      <Route path="/"> 
        <div>메인페이지</div>
      </Route>
      <Route path="/detail">
        <div>상세페이지</div>
      </Route>
    </div>
  )
}

◾ / 여기로 접속하면 메인페이지를 보여준다.
◾ /detail로 접속하면 상세페이지를 보여준다.
◾ 라우팅하려면 1. 여러가지 태그들 import가 필요하다.
◾ 라우팅하려면 2. 원하는 곳에 태그를 작성한다.
◾ 라우팅하려면 3. 안에 path와 path 방문시 보여줄 HTML 을 적는다.
◾ <Route path="/detail" component={Detail} ></Route> 많은 HTML넣을 필요없이 모듈화시킨 Component를 하나 넣을 수 있다.
◾ <Route path="/detail"><Detail /></Route> 이렇게도 적을 수 있다

React-Router 특징 :

◾ 각각 페이지마다 다른 HTML 파일을 보여주는게 아님.
◾ HTML 내부의 내용을 갈아치워서 다른 페이지처럼 흉내내는것이다.
◾ exact라는 속성을 부여해주면 /라는 경로가 포함되있는것들을 공휴해주는 행위를 방지하여
지정된 곳만 가리키게된다.

<Route exact path="/"> 
  <div>메인페이지</div> 
</Route> 

👉 메인페이지/상세페이지 Route에 내용 채우기

function App(){
return (
  <div>
    <Navbar></Navbar> (상단메뉴 레이아웃)
    
    <Route path="/"> 
      <Jumbotron></Jumbotron> (Jumbotron 대문 레이아웃)
      <>상품3개 카드 레이아웃</>
    </Route>

    <Route path="/detail">
     <Detail / >
    </Route>
  </div>
)
}