📌 Router

💡 Router의 import 구조

• BrowserRouter as Router
• Switch
• Route
• Link

라우터에는 BrowserRouter 가 보통 많이 사용되며
Link 와 Route 를 통해서 라우팅을 구현하는 방식이다
작업하고 있는 전체 코드를 살펴보자

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from 'react-router-dom';
import './App.css';
import BlogForm from './components/BlogForm';


function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/blog">Blog</Link>
      </nav>
      <Route path="/">Home Page</Route>
      <Route path="/blog"><BlogForm /></Route>
    </Router>
  );
}

두개의 컴포넌트가 있고 위와 같이 path와 Link 속성을 통해
각각의 컴포넌트가 렌더링 되는 URL이 정해진다

🚩 여기서 문제점

<Router>
  <nav>
  	<Link to="/">Home</Link>
  	<Link to="/blog">Blog</Link>
  </nav>
  <Route path="/">Home Page</Route>
  <Route path="/blog"><BlogForm /></Route>
</Router>

홈페이지에 들어갔을 때 /blog 도 /로 매칭되기 때문에
2개의 컴포넌트가 모두 렌더링 된다는 것

<Router>
  <nav>
  	<Link to="/">Home</Link>
  	<Link to="/blog">Blog</Link>
  </nav>
  <Route exact path="/">Home Page</Route>
  <Route path="/blog"><BlogForm /></Route>
</Router>

이와 같은 문제점을 해결하기 위해선 path 앞에 exact를 사용하여
정확히 일치하는, 즉 부분적으로 일치하는 것이 아니라 정확하게
일치하는 URL의 컴포넌트를 렌더링시키는 방법을 사용할 수 있다

📌 Switch

<Router>
  <nav>
  	<Link to="/">Home</Link>
  	<Link to="/blog">Blog</Link>
  </nav>
  <Route exact path="/">Home Page</Route>
  <Route path="/blog"><BlogForm /></Route
  <Route component={Page404} />
</Router>

에러가 발생했을 때 Page404 컴포넌트를 보여주고 싶은데
실제로 실행시 에러가 발생하지 않음에도 불구하고 해당 컴포넌트가
어떠한 URL에도 렌더링 된다는 것을 알 수 있다
이유는 리액트의 라우터가 path를 매칭시킬 때 값이 없기 때문에
무조건적으로 렌더링을 시켜버리는 것이다

<Router>
  <Switch>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/blog">Blog</Link>
    </nav>
    <Route exact path="/">Home Page</Route>
    <Route path="/blog"><BlogForm /></Route>
	<Route component={Page404} />
  </Switch>
</Router>

따라서 이 문제를 해결하기 위해 Switch가 등장한다
Switch는 첫번째로 매칭되는 path를 가진 컴포넌트를 렌더링 시킨다
exact path와 다른점은 첫번째 매칭만 본다는 것

💡정리

• path는 링크가 부분적으로 일치하면 실행되지만
• exact path는 링크가 정확하게 일치해야 실행된다
• Switch는 path가 없는 함수로 이루어진 컴포넌트도 정확하게
  렌더링 하기 위해서 사용한다