[TIL] react-router-dom 사용법

react-router-dom

브라우저에서 사용되는 리액트 라우터이며 주소값의 변경에 따라 페이지 혹은 컴포넌트의 변화를 제공하기 위한 라이브러리 입니다. SPA의 라우팅 문제를 해결하기 위해서 거의 표준처럼 사용되고 있는 네비게이션 라이브러리입니다. React Router를 사용하면 앱에서 발생하는 라우팅이 location 나 history와 같은 브라우저 내장 API와 완벽하게 연동이 됩니다.

Router

Route와 Link 컴포넌트가 함께 유기적으로 동작하도록 묶어주는데 필요하며 Route 와 Link를 사용하기 위해서는 DOM 트리 상에서 항상 Router가 최상위에 있어야 한다

<HashRouter>
  <Link />
  <Link />
  <Router />
  <Router />
</HashRouter>

• HashRouter
  주소 사이에 hash 값이 들어가게 된다. [ localhost:8080/#/주소 ] 이런 형식으로 보이며 해쉬값 때문에 서버에 요청이 가지 않는다 그래서 백엔드가 필요하지 않는 곳에 사용된다.
• BrowserRouter
  이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로 고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다.
  (history란? 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나로, 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있습니다. 예를 들어 특정 버튼을 눌렀을 때 뒤로 가거나, 로그인 후 화면을 전환하거나, 다른 페이지로 이탈하는 것을 방지해야 할 때 history를 이용합니다.)

Link

a 태그와 비슷하며 to라는 속성을 사용하는데 이것은 a 태그의 href의 개념과 비슷하지만 그렇다고 a 태그를 사용해서는 안 된다. 리액트 라우터는 페이지가 존재하는 게 아니라 페이지가 이동하는 것처럼 흉내 내는 것이기 때문에 브라우저에서 제공하는 a 태그를 사용할 경우 라우터가 인식하지 못한다.

<Link to="/about">About</Link>

이런 식으로 to 속성에 이동할 도메인을 입력한다 예를 들어 About 버튼을 클릭하면
http://localhost:3000/about으로 도메인이 이동한다

Route

<Route path="/about" component={About} />

Route 컴포넌트 중 첫 번째 path는 현 도메인 주소의 경로가 path와 같은 경로를 찾는 것이고(Link to를 통해 설정한 경로) 두 번째 componet는 path와 같은 경로에 있다면 실행할 컴포넌트를 할당한다.