[LIBRARY] react-router-dom

react-router-dom이란?

리액트 라우터는 리액트의 서드파티 라이브러리로 화면전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 리액트 라우터를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로, 페이지 이동 시에도 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 사실 리액트 라우터 없이도 컴포넌트 업데이트를 통해 화면전환을 할 수 있다. 그럼에도 리액트 라우터를 사용하는 이유는 사용자에게 새로고침, 뒤로가기, 즐겨찾기 등의 기능을 제공하기 위함이다.

reactrouter.com/

 

API :

BrowserRouter

import { BrowserRouter as Router } from 'react-router-dom'

History API를 사용하는 라우터로 일반적으로 쓰이는 라우터이다.

HashRouter

import { HashRouter as Router } from 'react-router-dom'

URL Hash를 사용하는 라우터. Url에서 경로 앞에 해쉬태그#를 붙여 이동할 수 있다. 서버의 응답이 필요하지 않기 때문에 작은 Client side application에서 주로 사용한다.

Link

<Link to='home'>HOME</Link>

a태그 대신 Link를 사용하여 경로를 지정한다.

NavLink : Link와 같이 경로를 지정할 수 있고, 스타일을 넣을 수 있다.

MemoryRouter

Redirect

Route : "도착지"이다. exact를 활용해야 한다.

<Route path='home' component={home} />

- 경로를 업데이트하고 싶은 컴포넌트와 연결한다. Link태그에서 지정한 경로인 home을 home이라는 이름을 가진 컴포넌트와 연결했다.

- 배열형태로도 path를 설정할 수 있다. path={['경로1', '경로2']}

[주의] Route 안에 인라인 스타일로 component를 넣으면 컴포넌트를 재실행해준다.

Router

<Router>
    <Link to='home'>HOME</Link>
    <Route path='home' component={home} />
</Router>

Link태그와 Route태그를 묶어 서로 연결해주는 역할을 한다. 즉 Link태그와 Route태그는 Router태그 안에 함께 존재해야 한다.

StaticRouter

Switch : redirect 방향/길을 정해준다.

<Switch>
    <Route path='/work/photography/animal' component={work} />
    <Route path='/work/photography' component={work} />
    <Route path='/work' component={work} />
</Switch>

만일 여기서 path='/work' 가 가장 상단에 쓰였을 경우, path='/work/...'을 포함한 경로는 모두 /work로만 이동하게 된다.

404페이지로 이동시키기 위해 혹은 컴포넌트가 중복되었을때 사용한다. Switch 태그로 Route태그를 감싸주면 Route태그를 순서대로 확인하여 가장 첫번째로 일치하는 Route로 랜더링하게 된다. 따라서 하위경로부터 상위경로의 순서대로 작성해야 한다.