React Router

SPA는 하나의 페이지를 가지고 있지만, 사실 한 종류의 화면만 사용하지 않습니다.
트위터와 같은 SPA를 예로 들자면, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지, 검색 페이지 등의 화면이 있습니다.
또한 이 화면에 따라 "주소"도 달라집니다.
이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."는 의미로 라우팅(Routing) 이라고 합니다.
생활코딩에서는 라우팅, 라우터를 사용자가 어떤 주소로 들어왔을 때, 그 주소에 해당하는 적당한 페이지를 사용자에게 보내주는 것이라고 말했습니다.

하지만, React 자체에 이 기능이 내장되어 있지는 않기 때문에 라이브러리를 사용해야 합니다.

가장 많이 사용하는 라이브러리는 React Router입니다.

React Router의 활용법

React Router의 주요 컴포넌트

router	route matchers	route changers
<BrowserRouter>	<Switch>, <Route>	<Link>

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다.
라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch와 Route, 그리고 경로 변경 역할을 하는 Link 입니다.
이 컴포넌트를 사용하기 위해서는 React Router 라이브러리에서 따로 import 해와야 합니다. 불러오는 것은 아래 명령어를 사용해야 합니다.이 컴포넌트를 사용하고 싶은 .js 파일마다 위에 써주어야합니다.

import {BrowserRouter, Switch, Route, Link } from "react-router-dom";

BrowserRouter

최상위 컴퍼넌트에 감싸주는 wrapper-component 입니다.
웹 어플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해줍니다.
ReactDOM의 렌더 단계인 index.js에 넣어서 활용할 수도 있습니다.
BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있습니다.

BrowserRouter는 React Router DOM이 사용되는 부분의 상위 컴포넌트로 위치해야 합니다.

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

Swtich, Route

경로를 매칭해주는 역할을 해주는 컴포넌트입니다.

• <Switch> 컴포넌트는 여러 <Route>를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할을 합니다
• <Switch> 를 사용하지 않으면 매칭되는 모든 요소들을 렌더링합니다.
• <Switch> 내부는 url에 따라 각각 다른 페이지를 보여주고 <Switch> 외부는 모든 페이지에 공통으로 노출됩니다.
• <Route> 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동합니다.
• <Route> 컴포넌트는 <Link>컴포넌트가 클릭 될 때, Link 컴포넌트의 to 속성과 자신의 path 속성과 일치하는 것만 보여줄 수 있도록 하는 컴포넌트입니다.

렌더링이란?

서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정으로 화면에 나타낸다고 생각하면 됩니다.

Link

SPA를 구현할 수 있는 경로를 연결해주는 역할을 하는 컴포넌트입니다.
페이지 전환을 통해 페이지를 새로 불러오지 않고 어플리케이션을 그대로 유지해서 페이지 주소만 변경해 줍니다.
ReactDOM으로 렌더를 시키면 <Link> 컴포넌트는 <a> 태그로 바뀌는 모습을 볼 수 있습니다.
<a> 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어납니다. 반면에 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있어 SPA를 구현할 수 있습니다.

Link 컴포넌트는 해당 컴포넌트를 클릭할 때, Route의 path와 일치하는 페이지로 이동할 수 있게 해주는 컴포넌트입니다.

---

정리하자면,

Switch 안에 라우트를 통해서 각각의 컴포넌트가 들어가 있고, about이라는 컴포넌트는 Route를 통해서 /about이라는 경로에 들어가게되면 about이라는 컴포넌트가 보여지게 되도록 길을 만들어줍니다. 
그리고 Link를 통해서 about에 들어갈 수 있는 연결고리를 생성하는 것입니다.

---

Route와 Link의 exact

React router의 특성상 exact 속성이 없으면 해당 경로로 시작하는 (예를 들어 "/")로 시작하는 중복된 컴포넌트를 모두 보여줍니다. 그러므로 exact는 주어진 경로와 정확히 일치해야할 때 사용합니다.

하지만 <Switch>를 사용하면 exact 속성을 사용하지 않아도 페이지가 전환될 수 있습니다.
<Switch>는 순서의 위치가 중요합니다. 위에서 아래로 경로를 하나씩 검사하면서 해당 경로에 해당하는 라우터를 실행시키기 때문입니다. 이런 경우에는 비교할 라우트를 더 상단에 작성해야합니다.
<Switch>는 Path와 정확히 일치하는 첫번째 컴포넌트가 발견되면 나머지 컴포넌트들은 버립니다. 그래서 <Switch>를 사용할때에는 "/"를 사용할거라면 맨 뒤에 놔야합니다.
<Switch>가 있으면 그 스위치 아래에 있는 컴포넌트 중에 하나만 화면에 출력하고, <Switch>가 없으면 일치하는 모든것들을 함께 출력합니다. <Switch>를 사용하면서 "/"를 위에 두고 싶다면, exact path="/"로 exact를 붙여주면 됩니다.
사용자가 잘못된 입력으로 들어왔을 때에는 <Route path="/">Not found</Route>를 쓰면 화면에 Not found를 출력할 수 있습니다.

NavLink

네비게이션 링크, 네브 링크. 링크에 조금의 기능이 부가된 컴포넌트입니다.
현재 위치하고 있는 페이지에 class="active"라는 클래스가 생깁니다.
CSS로 현재 위치를 표시해줄 수 있습니다.

BrowserRouter => 길을 정해주는 친구
Route => 길 그 자체
URL => 경로변경을 해주는 주소

HashRouter

<HashRouter>는 url에 #이 있는 라우터이다. BrowserRouter를 사용할 수 없을때 사용합니다.

더 자세한 내용은 공식 홈페이지를 참고합시다.
https://reactrouter.com/web/example/basic

React Router: Declarative Routing for React