React Project5. 셋팅과 기본 라우팅

라우팅 : 페이지를 여러개 나누자
= react-router-dom 라이브러리 이용
터미널에 yarn add react-router-dom

BrowserRouter (샾 없음)
vs
HashRouter (샾 있음)
hashrouter가 조금 더 안전함
사이트 주소 뒤에 #이 붙는데 # 뒤에 적는 것은 서버로 전달X
그래서 라우팅은 리액트가 알아서 잘 해줄수 있음

BrowserRouter:라우팅을 리액트가 아니라 서버에게 요청할 수도 있어서 위험
서버 : "어 그런페이지 없는데요? 할수 있음"

밑 코드는 "App.js에 있는 컴포넌트를 index.html에 꽂아주세요"라는 뜻

import 어쩌구 많은곳;

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

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

를 쓸수도 있는데 이건 사이트 방문시 /#/이 붙은채로 시작
를 복붙하면 # 이런거 없이 깔끔.

Q. URL이 #기호로 드러워지는 HashRouter를 왜쓰죠?

A. 원래는 브라우저 주소창에 뭔가 페이지를 입력하면 서버에게 특정 페이지좀 보여달라는 요청이 됩니다.
근데 우리는 요청할 서버가 없고 그냥 리액트가 라우팅을 담당하고 있습니다.
그래서 잘못하면 있지도 않은 페이지를 서버에 요청을 해서 404 Page Not Found 이런 에러가 뜸.
실수로 서버에게 요청하지 않게 하려면 안전하게 #을 붙여주어야합니다.
왜냐면 브라우저 주소창에서 # 뒤에 붙은 것들은 절대 서버로 요청되지 않으니까요.

Q. 그럼 BrowserRouter는 안좋은거네요?

A. 그건 아니고 BrowserRouter를 쓰시려면 그냥 서버에서 셋팅만 잘해주시면 됩니다.
“이런 경로로 들어오는 요청은 404 보내지 말구요~ 전부 리액트가 라우팅하게 해주세요~”
“이 경로로 들어오는 요청은 그냥 리액트 메인페이지로 보내주세요~”
이런 식으로 API를 짜놓으면 됩니다. 물론 서버지식이 없다면 이건 몰라도됩니다.

오늘의 목표

(1) / 여기로 접속하면 메인페이지 띄우기
(2) /detail로 접속하면 상세페이지 띄우기

라우팅하려면 1. 여러가지 태그들 import가 필요합니다.

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

라우팅하려면 2. 원하는 곳에 태그를 작성합니다.
라우팅하려면 3. 안에 path와 path 방문시 보여줄 HTML 을 적으시면 됩니다.

  import 많은 곳;
import { Route } from 'react-router-dom';

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route path="/"> 
        <div>메인페이지인데요</div>
      </Route>
      <Route path="/detail">
        <div>상세페이지인데요</div>
      </Route>
    </div>
  )
}

참고)
/어쩌구라느 경로로 접속하면 Card라는 컴포넌트를 띄어줌

아래처럼 쓸 수도 있음(더 쉬움)

React-Router 특징 :
– 각각 페이지마다 다른 HTML 파일을 보여주는게 아닙니다.
HTML 내부의 내용을 갈아치워서 다른 페이지처럼 흉내내는 것일 뿐.

매칭 되는 페이지 다 보여줌-> exact 써야함

/detail이라고 적으면 /라는 경로도 포함되어있기 때문.
'/만 적힌' 페이지로 넘어가고 싶으면 아래처럼 exact를 입력해주면됨

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

(App.js)

import 많은 곳;
import { Link, Route, Switch } from 'react-router-dom';
  
function App(){
  return (
    <div>
      <Navbar></Navbar> (상단메뉴 레이아웃)
      
      <Route path="/"> 
        <Jumbotron></Jumbotron> (Jumbotron 대문 레이아웃)
        <>상품3개 카드 레이아웃</>
      </Route>

      <Route path="/detail">
        <div>상세페이지인데요</div>
      </Route>
    </div>
  )
}