React Router 1

#### What is SPA?
내가 정리한 SPA 글

Router??

SPA 에서 보여주는 페이지는 한 종류 이지만 다른 주소에 있는 화면을 보여주게 하는것이 Router 이다..

예시:

홈이라는 화면 이 있고

about 라는 페이지 를 보이게 한것이다.

Router 적용 방법:

yarn add react-router-dom
npm install react-router-dom
둘중에 선택.

1. Router 적용할 페이지에

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

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

BrowserRouter: HTML5의 History API를 사용하여

페이지를 새로고침 하지 않고 주소 변경, 현재 주소 관련된 정보를 props로 쉽게 조회하여 사용가능하게 함

2. 각 페이지 Route 적용

import React from "react"
import Home from "./Home"
import About from "./About.js"
import { Route } from "react-router-dom"

const App = () => {
  return (
    <div>
      <Route path="/" component={Home} exact={true} />
      <Route path="/about" component={About} />
    </div>
  )
}

export default App

React 에는 a tag 대신 Link

• Link 는 컴포넌트를 클릭하면 다른 주소로 이동시켜주는 컴포넌트임,
  일반적으로 a태그를 사용하면 페이지를 전환하지만....페이지 전환 과정에서 페이지를 새로불러오기 때문에 랜더링된 컴포넌트들도 모두 사라지고 처음부터 렌더링하게됨

-Link 는 HISTORY API를 사용하여 페이지의 주소만 변경해준다. (Link tag 는 사실 a tag 이지만..) 페이지 전환을 방지하는 기능이 내장되어있음.

import React from "react"
import Home from "./Home"
import About from "./About.js"
import { Route, Link } from "react-router-dom"

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Route path="/" component={Home} exact={true} />
      <Route path="/about" component={About} />
    </div>
  )
}

export default App

Route 하나의 여러개 path 설정하기

      <Route path={["/about", "info"]} component={About} />