* Router 란?

리액트는 SPA (Single Page Application) 방식이다.

여러개의 페이지로 구성 된 MPA(Multi Page Application) 방식과는 다르게

SPA 방식은 하나의 페이지 안에 필요한 데이터만 다시 렌더링 한다.

MPA 방식은 새 페이지 요청시 정적 리소스가 다운로드 되고,

전체 페이지를 다시 렌더링 하기때문에 페이지 이동시 화면 깜빡임이 존재한다.

리액트 라우터를 사용하면 페이지 깜빡임 없이 필요한 내용만 다시 그려줄 수 있고 페이지 이동도 가능하다.

# router, router-dom, router-native

React-router 웹,앱 개발 컴포넌트

React-router-dom 웹 개발 컴포넌트

React-router-native 앱 개발 컴포넌트

# DOM Router

HashRouter : 주소 사이에 Hash(#)가 붙는다 'www.000.com/#/login'.

해시 이전의 주소에 대한 요청을하기 때문에 서버 요청이 필요하지 않은 페이지에 주로 사용한다.

HashRouter 사용시 링크 에러가 발생할 수 있고, 검색엔진에서 탐색되지 않는다.

새로고침시 에러가 발생하지 않는다.

BrowserRouter : HTML5의 history API를 활용하여 UI를 업데이트 한다.

request와 _response로 구성되기 때문에 동적인 페이지에 적합하다.

새로고침시 경로를 찾지 못해 에러가 발생한다.

# 리액트에서 라우트 사용시 유의사항 :

1. Route 태그는 BrowserRouter 태그 안에 작성되어야 한다.

2. path 지정시 "/"로 설정된 값은 exact를 사용하여 중복을 방지한다.

3. link 태그 사용시 path를 공유하는 Route태그가 존재해야 한다.