JS => React Router

라우팅이란?

트위터와 같은 SPA(single page application)를 만들 때,
메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 다양한 화면이 필요할 수 있다.

또한, 이 화면에 따라 "주소" 도 달라지는데,
이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 다라 변경한다" 라는 의미로
"라우팅" 이라고 한다.

하지만 React 자체에는 이 기능이 내장되어 있지 않기 때문에,
직접 주소마다 다른 뷰를 보여줘야 한다.

React SPA에서는 라우팅을 위해 "React Router" 라는 라이브러리를 가장 많이 사용한다.

React Router 설치 명령어

npm install react-router-dom

React Router 주요 컴포넌트

주요 컴포넌트 4가지

<BrowserRouter> // 라우터 역할 
<Switch> // 경로를 매칭해주는 역할
<Route> // 경로를 매칭해주는 역할
<Link> // 경로를 변경하는 역할

React Router 사용 환경 세팅

사용 환경 세팅

<BrowserRouter> // 라우터 역할 
  <div>
   <nav>
    <ul>
     <li>
      <Link to="/">Home</Link> // Home이라는 textContent에 링크 삽입
     </li>
     <li>
      <Link to="/about">MyPage</Link> // MyPage라는 textContent에 링크 삽입
     </li>
     <li>
      <Link to="/dashboard">Dashboard</Link> // Dashboard라는 textContent에 링크 삽입
     </li>
    </ul>
   </nav>
<br>
  <Switch> // 경로를 매칭해주는 역할 (전체의 길을 보여주는)
    <Route exact path="/"> // 경로를 매칭해주는 역할(특정 한 가지의 길을 보여주는)
      <Home />
    </Route>
    <Route path="/about">
      <MyPage />
    </Route>
    <Route path="/dashboard">
      <Dashboard />
    </Route>
  </Switch>
  </div>
</BrowserRouter>

위처럼,
<BrowserRouter>는 라우터 범위를 전체 감싸는 역할을 한다.
<Link>는 경로를 심어주는 역할을 한다. "to" 옆 주소가 해당 경로다.
<Switch>는 Link가 심어준 주소에 따라 맞는 컴포넌트 길들을 보여준다.
<Route>는 특정 한 가지의 주소를 보여주는데,
"이 주소가 맞을 경우 해당 컴포넌트 페이지로 이동한다" 로 해석하면 편할 수 있다.