[shop-project] Router

🌈 Router

• Routing = 페이지 나누기
• SPA로 구성된 web-app을 만들 때 필수적인 라이브러리.

SPA(Single Page Application)

• 싱글 페이지 어플리케이션이다. 말 그대로 페이지가 1개인 어플리케이션이라는 뜻.

• 여러 화면으로 구성된 웹 어플리케이션을 만들게 된다면, react-router는 필수 라이브러리이다.

🍎 router 설치 방법

1. npm install react-router-dom 터미널에 설치

2. index.js파일에 셋팅

2-1. import { BrowserRouter } from 'react-router-dom' import 해주기
2-2. <App.js>를 <BrowserRouter>로 감싸준다
➡ <BrowserRouter> <App /> </BrowserRouter>

❗ <BrowserRouter> 대신 <HashRouter>로 대체할 수 있다 (Routing을 더욱 안전하게 #)

3. App.js 파일에 import해주기

3-1. import { Link, Route, Switch } from 'react-router-dom' 상단에 import 해주기

---

🐣 import { Link, Route, Switch } from 'react-router-dom'

• Link ➡ 자바스크립트의 <a>태그와 동일한 기능
• Route ➡ 보여줄 페이지를 담는 공간 (페이지마다 감싸주기)
• Switch ➡ Route를 전체 한 번에 감싼다(route마다 스위치 되도록 설정)

---

🎃 <Route> ➡ 보여줄 페이지의 경계 감싸기

• <Route exact path="/"> 기본 페이지 내용 </Route>
• <Route path="/detail"> detail 페이지 내용 </Route>
• <Route path="/login"> login 페이지 내용 </Route>

❗ 모든 페이지에 슬래시(/)가 중복되므로 기본(메인)페이지의 경로를 설정할 때, exact를 추가해준다
(=경로가 슬래시와 정확히 일치할때만 기본페이지 보여주기)

// App.js 파일
import React, { useState } from 'react';
import Data from './data.js'; 
import Detail from './component/Detail.js'; 

function App() {

  let [shoes, setShose] = useState(Data);

  return (
  // 메인 페이지 접속했을 때 보여줄 내용 
  <Router>
      <jumbotron 태그s>
      <Product 태그s>
  </Router>

  // detail 페이지 접속했을 때 보여줄 내용 
  <Router>
      <Detail />  // 컴포넌트화 하여서 하위컴포넌트 1줄로만 넣을 수도 있다
  </Router>
  )
}

🌝 <Route path="/:id"> </Route> : /모든문자 라는 경로를 의미

---

🎃 <Link> ➡ 페이지 이동 기능

• 기본 문법: <Link to="경로"> 버튼 </Link>

<Link to="/detail"> 버튼 </Link> ➡ detail 페이지로 이동
<Link to="/login"> 버튼 </Link> ➡ login 페이지로 이동

🐻 뒤로가기 기능 버튼 만들기

• 버튼에 onClick이벤트 기능을 달고, 뒤로 이동하려는 기능에는 useHistory()함수를 활용한다.
• goBack() 함수를 통해 바로 이전 단계 페이지로 이동할 수 있다.

  <button onClick={ () => { history.goBack(); } }

• push() 함수를 통해 특정 경로를 지정하여 해당 경로로 이동할 수 있다.

  <button onClick={ () => { history.push('/'); } }  // 메인 페이지로 경로지정

💡 useHistory() 함수 활용 방법

1. 상단에 import 해주기 (router를 import할 때 적용하는 중괄호에 추가)
   import { useHistory } from 'react-router-dom

2. 변수에 저장 해주기
   let history = useHistory();

3. onClick 이벤트 내에 history 넣어주기 (goBack() 함수 또는 push() 함수와 함께쓰기)
   <button onClick={ () => { history.goBack(); } }

❗ useHistory() 함수의 기능은, 방문 기록 등을 저장해놓는 object이다.
react의 hook의 일종
(useHistory라는 훅 import / useHistory()훅 사용 / 이벤트에 사용할 때, 모든 방문기록을 담는 history 뒤에 어떤 경로로 갈지 함수로 붙여준다(goBack() 또는 push())

---

🎃 <Switch> ➡ 여러개의 페이지가 맞아도 하나만 보여주게 만드는 기능

• 모든 router를 하나로 감싸준다. 하나의 router가 켜지면 나머지는 꺼지도록 만드는 기능을 한다.
  ❗ router 중복 출현 불가
• <Route path="/:id"> </Route> 는 지정 외 경로를 입력했을 때 보여주도록 지정하는 기능이다. 이럴 경우, 지정된 경로와 겹칠 수 있다. 따라서 위 태그를 맨 마지막에 위치시킨 후 Switch로 감싸주면 위의 router들이 모두 해당되지 않을 때 실행될 수 있다.
  

// App.js 파일
import React, { useState } from 'react';
import Detail from './component/Detail.js'; 

function App() {

  return (
    <Switch>
        <Router>
            <jumbotron 태그s>
            <Product 태그s>
        </Router>

        <Router>
            <Detail /> 
        </Router>

        <Router path="/:id">  
            <div />
        </Router>
    </Switch>
  )
}