기존에는 브라우저가 서버에게 페이지를 요청할 때는 url 단위를 바탕으로
브라우저가 보고싶은 페이지의 url 을 입력하면 url 이 서버에게 해당 page의
html, css, js 등등 을 받아왔다.

React 로 넘어오면서 **SPA**(single page application) 개념이 안착된다.
이제는 한번에 커다란 App을 받아온다. 그리고 브라우저에서 url 에 따라 어떤걸
볼지 결정한다.

SPA 라우팅 과정
1. 브라우저에서 최초에 '/' 경로로 요청을 하면,
2. React Web App을 내려준다.
3. 내려받은 React App 에서 '/' 경로에 맞는 Component 를 보여준다.
4. React App 에서 다른 페이지로 이동하는 동작을 수행하면,
5. 새로운 경로에 맞는 Component 를 보여준다.

$ npm install react-router-dom
가장 대표적인 라우팅 패키지로, Facebook 의 공식 패키지는 아니다.

// pages 폴더를 만들고 About.jsx, Home.jsx, profile.jsx 파일을 만든다.
// 아래처럼 3장 만들어준다.
export default function Home() {
  return <div>Home Page!</div>
}

// App.js
import { BrowserRouter, Route } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Hoem';
import Profile from './pages/Profile';

function App() {
  return (
    <BrowserRouter>
    <Route path="/" component={Home} />
    <Route path="/profile" component={Profile} />
    <Route path="/About" component={About} />
    </BrowserRouter>
  );
}

export default App;

Route 컴포넌트에 경로(path) 와 컴포넌트(component)를 설정해 준다.
BrowserRouter 로 Route 들을 감싼다.
브라우저에서 요청한 경로에 Route 의 path 가 들어있으면 해당 Component를 보여준다.

근데 위와 같은 코드를 페이지에서 띄워보면 Home page!는 상당에 계속 뜬다.
// <http://localhost:3000/About>
Home Page!
About Page!

/profile 에서 / 부분이 Home 으로 매칭되고 있는 것이다.
<Route path="/" exact component={Home} />
exact 를 추가함으로써 path가 완전히 같을 때만 호출하게 할 수 있다.