React의 동적 라우팅.

React는 SPA 기반이다.

SPA란 Single Page Application.

1. 특정 페이지 내부에서 즐겨찾기를 해도 기본 url값 즐겨찾기를 할 수 있고
2. 컴포넌트가 변환돼도 url값은 그대로 유지
3. 뒤로가기 시 이전 컴포넌트가 아닌 아예 이전 페이지
4. 새로고침하면 무조건 처음 세팅된 컴포넌트 값

그래서 React Router를 쓰면 위의 문제들이 해결이 된다.

npm install react-router-dom

React Router는 여러 컴포넌트가 있는데 그 중 핵심은 3가지.

Link: html에서의 a태그와 유사하게 react에서 link 컴포넌트를 이용해서 원하는 경로를 렌더링해서 갈 수 있다.

<Link to="/somewhere> 이런 식으로 갈 수 있다. 

Route: 원하는 경로를 지정해서 url주소값과 일치할 때, 원하는 컴포넌트를 보여줄 수 있다.

<Route path="/product" component={Product} />

Router: react-router-dom에서 상위 컴포넌트로 DOM트리에서 위의 다른 컴포넌트를 자식 컴포넌트로 갖는다.
Router는 HashRouter, BrowserRouter가 있는데 보통 브라우저라우터를 쓰며

import {
Link, Route, BrowserRouter as Router
} from 'react-router-dom'

이렇게 as값으로 Router로 쓴다.!