6버전은 아래의 블로그를 참조
오늘 정리한 React Router는 5버전이다.(회사에서 5버전을 사용하기 때문)
만약 6버전 사용하려면 이 블로그가 도움이 될 것이다.
v6의 주요특징
v6 대비 약 70% 정도의 번들 사이즈가 줄어들었다. 이는 버전만 업데이트 하더라도 번들 크기에 대한 최적화가 가능하다는 이점이 있다.
react-router는 위와 같이 Remix-run이라는 팀이 관리하는데 Remix-run과의 호환 문제 때문에 대규모 변화가 일어났다고 추측된다.
React Router Dom v5 정리
오늘 블로그는 생활코딩 youtube의 React Router 강의를 기반으로 정리했다.
React Router란?
리액트는 SPA (Single Page Application) MPA방식으로
a태그를 사용하거나window.loacation.href등의 메서드를 사용하는 방식이 불가능하다.
React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지로 렌더링 해주는 라이브러리이다.
BrowserRouter
BrowserRouter는 라우팅을 시작하는 코드이다.
<Route> 코드는 반드시 <BrowserRouter> 안에서 실행 되어야 한다.
보통 최상위 컴포넌트를 <BrowserRouter>로 감싸는 방식을 사용한다.
Route
라우트를 설정 할 때에는 <Route> 컴포넌트를 사용하고, 경로는 path 값으로 설정한다.
만약 정확한(exact) 경로만 라우팅 해주고 싶으면 exact path로 지정해 주면 된다.
Switch
<Switch> 로 리액트를 감싸게 되면 path와 일치하는 첫 번째 컴포넌트만 출력되게 된다.
<BrowserRouter>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/page1">Page1</Link></li>
<li><Link to="/page2">Page2</Link></li>
</ul>
<Switch>
<Route path="/"><Home/></Route>
<Route path="/page1"><Page1/></Route>
<Route path="/page2"><Page2/></Route>
</Switch>
</BrowserRouter>위와 같이 라우팅을 해놨을때 어느 Link를 누르더라도 Home이 출력된다는 뜻이다.
/page1로 이동을 하려 그래도 먼저 /에서 걸리기 때문이다.
Link
a 태그를 사용하면 페이지가 리로딩되기 때문에 Link컴포넌트를 이용한다.
// a 태그
<a href="pageName"></a>
// Link 컴포넌트
<Link to="pageName"></Link>a 태그의 href에서 Link에서는 to로 바뀌었다고 생각하면 된다.
HashRouter
HashRouter는 위에서 언급한 BrowserRouter와 사용 방법은 같다.
HashRouter는 주소에 #가 붙고, SEO에 불리하다는 단점이 있다.
url이 www.domain.com/#/path와 같이 이루어져 있는데, #이전의 www.domain.com에 대한 요청만 서버가 받아들이게 되므로, 주소 이동후, 새로고침해도 에러가 발생하지 않는다.
주로 정적인 페이지에 사용된다.
NavLink
NavLink는 Link와 사용 방법은 같다.
차이점은 NavLink는 현재 NavLink컴포넌트의 class로 active를 추가한다.
이를 이용해서 navigation bar에 사용자가 어떤 페이지를 보고있는지 직관적으로 알려줄 수 있다.
.actvie{
background-color: red;
text-decoration: none;
}이렇게 CSS를 추가하면 현재 선택한 NavLink의 색상이 붉은색이고, 텍스트 데코레이션이 없어진다.
참고자료
SeJun3279 - React로 블로그 만들기 14: 리액트 라우터
VELOPERT.LOG - react-router
🐶🦶🏻🌱레벨업하기 - BrowserRouter VS HashRouter
