React / Router

Router의 필요성

 

각 URL 주소마다 서버와 통신하여 데이터를 내려다주는게 아니라, Single Page Application(SPA) 형태로 작성된 웹페이지를 서버에서 브라우저로 한번에 내려받고, 사용자의 요청에 따라 URL이 브라우저에서만 바뀌게 해서 서버와의 통신 횟수와 양을 줄여준다.

 

---

 

 

React router : Quick Start 따라하기

 

설치

create-react-app으로 react 폴더를 만들고, 해당 디렉토리에서 npm install react-router-dom 을 입력하여 라우터 라이브러리를 설치한다.

(앱을 위한 react-native 에서는 react-router-native를 이용한다.)

 

파일구조

App.js 파일의 구조이다.

react-router-dom에서 BrowserRouter, Switch, Route, Link 컴포넌트를 불러와서 사용한다.

리턴문 안에 Router 컴포넌트를 작성하고, DOM 구조를 만든다.

 

Link 컴포넌트를 이용해서 라우터 분기가 되는 주소 및 엘리먼트를 만든다.

to 속성으로 url 라우팅 주소를 설정한다.

Switch 컴포넌트 > Route 컴포넌트 > 각 페이지(About, Home, Users) 컴포넌트 구조로 만든다.

그 아래에 각 페이지에 해당하는 컴포넌트를 정의해주었다.

index.js

 

마지막으로 BrowserRouter를 index.js에 import하고,  <App /> 컴포넌트를  BrowserRouter로 감싸준다.

 

Primary Components

 

React 라우터의 3개 주요 컴포넌트 카테고리

• routers, like <BrowserRouter> and <HashRouter>
• route matchers, like <Route> and <Switch>
• and navigation, like <Link>, <NavLink>, and <Redirect>

BrowserRouter와 HashRouter

일반적으로 BrowerRouter를 많이 쓴다. 그 이유는 BrowserRouter는 history API를 이용해서 주소 변경을 손쉽게 할 수 있는 반면, HashRouter는 history를 쓸 수 없기 때문이다.

 

BrowserRouter는 일반적인, 동적인 웹페이지에서 많이 사용하고 HashRouter는 정적인 페이지에서 사용한다. HashRouter의 경우 URL에 '#'이 들어가게 된다. 그래서 검색 엔진이 이를 검색하지 못하고, 서버에서 전달해주는 페이지 정적인 페이지 정보만 표현해줄 수 있다. 

 

Switch - Route 컴포넌트

Switch 컴포넌트는 Route와 함께 쓰인다. Switch가 렌더링되면, 자식 요소인 Route 컴포넌트 중 현재 URL과 일치되는 것을 찾아서 렌더링해준다. 만약 일치되는 Route가 없다면 Switch 컴포넌트는 아무것도 반환하지 않는다.

 

Route 컴포넌트의 path 속성은 URL의 시작부분이 일치하는지만 살펴본다. 만약 URL 전체를 검사하고 싶다면 path 속성 대신에 exact path 속성을 사용해야한다. 보통 home의 주소인 '/'과 '/'이 붙은 다른 주소가 엉키지 않게 하기 위해서 exact path 속성을 많이 쓴다.

 

Link 컴포넌트

Link 컴포넌트는 DOM 구조에 링크 태그인 <a> 태그를 달아주고, 클릭 시 해당하는 path로 이동하게 한다.

 

 

---

참조

 

https://reactrouter.com/web/guides/quick-start