React-Router

사용자의 브라우저가 클라이언트 사이드에서 뷰 렌더링을 담당하도록 돕는 라이브러리

💡 서버 사이드 렌더링을 할 때에도 라우팅을 도와주는 컴포넌트들을 제공해준다.

라이브러리 설치하기

프로젝트 디렉토리로 이동하여 다음 명령어를 통해 리액트 라우터를 설치한다.

yarn add react-router-dom

1. Components 🔥

Route

• 현재 URL 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용하는 컴포넌트
  ➰ props > path : 매치시킬 경로, component : 보여줄 컴포넌트

<Route path="/home" component={Home} />

Link

• HTML의 <a>태그와 동일한 역할을 하는 컴포넌트
  ➰ props > to : 이동할 경로를 지정

<Link to="/home">This is home</Link>

👉 'This is home' 텍스트는 클릭할 수 있게 렌더링 되어 클릭 시, 주소창 경로는 '.../home'으로 변경된다.

Router

• Route, Link 컴포넌트가 함께 동작할 수 있도록 연결시켜주는 컴포넌트로, 항상 Router를 공통 상위 컴포넌트로 가져야한다.
  ➰ props > history

<Router>
	...
    <Route />
    <Route />
    ...
</Router>

• Router의 종류에는 BrowserRouter, HashRouter, withRouter 등이 존재한다.

🔎 더 알아보기

history

리액트에서 Router들은 props로 history 객체를 주고 받으며 페이지의 기록을 공유한다.
history 객체를 콘솔로 확인해보면 다양한 메소드와 관련 객체들이 존재한다. 가장 빈번하게 사용되는 메소드는 push()인데, 이는 history.push('이동하고자 하는 path')를 통해 원하는 컴포넌트로 이동이 가능하다.
1. history 객체

2. 예제 코드

• props로 받은 history의 메소드 push를 이용해 pathname과 state가 담긴 객체를 pathname에 적힌 경로로 전달하는 코드이다.

HashRouter

• 주소창에 해쉬(#)가 붙는다.
• 검색 엔진이 읽지 못하기에 거의 사용되지 않는다.
  ( 백엔드가 필요하지 않은 상황에 주로 사용 )

BrowserRouter

• HTML5의 history API를 활용한 라우터
• 주로 사용되는 라우터

Switch

• 모든 Router 컴포넌트들을 반복하며, 현재 URL과 path가 일치하는 첫번째 요소만 렌더링 하여 라우터 충돌을 막도록 하는 컴포넌트

<Router>
  <Switch>
     <Route exact path="/" component = { Main }/>
     <Route path = "/about" component = { About }/>
  </Switch>
</Router>

🔎 더 알아보기

<Router>
  <Route exact path="/" component = { Main }/>
  <Route path = "/about" component = { About }/>
  <Route path = "/detail" component = { Detail }/>
  <Route component = { Error }/>
</Router>

만약, 3가지 path(1~3줄)와 일치하지 않아 어떠한 URL로도 이동할 수 없는 경우에 Error 컴포넌트를 띄우기 위해 4번째 줄과 같이 Route를 추가해보자. 실제로 실행시켜보면 어떠한 URL에도 Error 컴포넌트가 렌더링 되는 것을 볼 수 있다.
👉 왜냐하면, 4번째 줄은 매칭시킬 path의 값이 없으므로 무조건적으로 렌더링이 되기 때문이다.
이를 해결하기 위해 Switch가 등장하였고, 위 코드는 다음으로 해결할 수 있다.

<Router>
  <Switch>
    <Route exact path="/" component = { Main }/>
    <Route path = "/about" component = { About }/>
    <Route path = "/detail" component = { Detail }/>
    <Route component = { Error }/>
  </Switch>
</Router>

❔ exact : 정확히 동일한 path가 들어왔을 경우에만 컴포넌트를 렌더링 하도록 하여 중복 컴포넌트 렌더링을 막는다.

2. Hooks 🔥

• class 작성 필요 없이 상태값(state)와 Hooks를 통해 react-router의 기능들을 이용할 수 있다.

• Hooks를 사용하기 전에 match, location, history의 역할에 대해서도 이해할 수 있도록 하자.

useLocation

🐾 location 객체는 현재 페이지의 정보를 가진다. 대표적으로 location.search로 현재 url의 쿼리 스트링을 가져올 수 있다

🚀 사용 예시

const location = useLocation();

다음은 네이버 영어 사전에 'hello'를 검색한 후 location을 확인했을 때의 결과이다.

location 객체 내의 search메소드를 통해 쿼리스트링 결과값을 가져올 수 있다.

useHistory

🐾 history 객체는 브라우저의 이동 기록들을 가지고 있다. 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로, 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다

🚀 사용 예시

const history = useHistory();

history.push('/');

💡 function component에서도 다음을 통해 페이지 이동 시 객체를 전달할 수 있다.

history.push({
	pathName: '/',
    state: { 
    	isOk: true,
        root: main
    }
});

-> 이동한 페이지의 location.state를 확인하면 전송된 객체의 값들을 가져올 수 있다.

useRouteMatch

match 객체에는 Route의 path와 url이 매칭된 대한 정보가 담겨진다. 대표적으로 match.params로 path에 설정한 파라미터값을 가져올 수 있다.

🚀 사용 예시

const match = useRouteMatch();

❔ match : Route 컴포넌트의 props인 path가 URL에 어떻게 match 되는가에 대한 정보를 담는 객체

useParams

• 현재 Route 컴포넌트의 match.params 에 접근해 사용할 수 있도록 한다.

Main 페이지에서 history.push를 통해 first 페이지로 이동할 때, pathname에 id를 붙여서 푸시해보자.

Route의 속성인 path에는 아래 사진에서 볼 수 있듯이 :id를 추가해주자.

first 페이지에서 params를 확인해보면 main 페이지에서 first로 보낸 params 즉, id값이 url과 페이지에 전송된 것을 확인할 수 있다.

💭

공식 api 문서와 블로그를 통해 실제로 실습해보고 공부하며 글을 정리해보았지만 실제로 많이 사용해보고 익숙해져야 할 것 같다.