[React] React Router

HongDuHyeon·2022년 3월 15일

비 좀 그만내려어어어어어어 제발

Router 란 ?

그리고 최근에 react-router가 v5에서 v6로 업데이트가 되었다 ! v6 기준으로 블로그를 작성할 예정이니 참고 바래용

Creat-React-App 줄여서 CRA에는 Routing을 하는 기능이 들어있지 않아서 가장 많이 사용하는 Routing-Solution인 react-router-dom을 추가해서 Routing을 구현한다.

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다.
이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다.

BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지 한다.
HashRouter 해시 주소 (http://velog.io/@HongDuHyeon)를 감지 한다.

Router 설치 방법

npm install react-router-dom --save

yarn

yarn add react-router-dom

Router 사용 예시

예를 들어 로그인, 회원가입, 메인 페이지가 있는 웹 애플리케이션이 있다고 가정해보자.
참고로 여기선 App.js를 사용하지 않고 Router.js 라는 파일을 따로 만들어서 분기할 예정 !!

Router.js

import React, { Component } from 'react'; 
import { BrowserRouter, Routes, Route } from 'react-router-dom'; 
import Login from './Login'; 
import Main from './Main'; 
import Signup from './Signup';

const Router = () => {
	return (
    	<BrowserRouter>
      		<ul className="floating">
        		<li>
         			<Link to="/">로그인</Link>
        		</li>
        		<li>
          			<Link to="/main">메인</Link>
        		</li>
      		</ul>
      		<Routes>
        		<Route path="/" element={<Login />} />
        		<Route path="/main" element={<Main />} />
              	<Route path="/signup" element={<Signup />} />
      		</Routes>
    	</BrowserRouter>
    )
}

먼저 BrowserRouter부터 보면 BrowserRouter는 위에 말했듯 HTML5를 지원하는 브라우저의 주소를 감지 하기 때문에 사용했고 그 안에 <Link to="">는 하단에서 설명할 예정이기 때문에 잠시 빼놓고 나면
<Routes>와 <Route> 이 두개가 남는다.

먼저 Routes를 살펴보면 Routes는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
그 다음 Route는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.

/로 접근시 Login 페이지를 보여줄 것 이다.

그리고 바리케이트 같은 index.js 파일은 전/후를 비교해보면 굉장히 많이 깔끔해졌다.
router 사용 전 index.js

import React from "react";
import ReactDOM from "react-dom";
import "./reset.scss";
import Main form "./pages/Main/Main"
import Login form "./pages/Login/Login"
import Signup form "./pages/Signup/Signup"

ReactDOM.render(<Login />, document.getElementById("root"));

router 사용 후 index.js

import React from "react";
import ReactDOM from "react-dom";
import "./reset.scss";
import Router from "./Router";

ReactDOM.render(<Router />, document.getElementById("root"));

router 사용 전 코드에서 결과 값을 확인하려면 계속 ReactDOM.render()에 첫번째 파라미터를 바꿔줘야했는데
라우터를 써서 navigator를 만들어서 직접 사용해보니 상당히 편리하다.

Link 컴포넌트 사용하기

웹 페이지에서는 원래 링크를 보여줄 때 a태그를 사용한다. 하지만 a태그는 클릭시 페이지를 새로 불러오기 때문에 사용하지 않는다.
Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

문법은 아래 코드와 같이 적어주면 되는데 안에 뭔가 있다. to가 보인다.
여기서 to는 url 뒤에 붙는다고 생각하면 된다.

<ul className="floating">
  <li>
    <Link to="/">로그인</Link>
  </li>
  <li>
    <Link to="/main">메인</Link>
  </li>
</ul>

그리고 Link를 할 때에는 상단 import에 이렇게 적어줘야한다.
적지 않으면 에러 지옥을 체험하게 될ㄱ...

import { Link } from 'react';

react-router v5 > v6로 바뀐 점

1. switch -> routes 로 네이밍

기존에 Route를 감싸는 부모가 switch에서 routes로 변경 되었다. 물론 switch를 사용해보진 않았지만 좀 더 직관적으로 확인할 수 있는 네이밍이 아닌가 싶다 ㅎ...

<Routes>
  <Route/>
  <Route/>
</Routes>

2. exact 옵션 삭제

v6에서는 더 이상 Route의 exact 옵션이 필요가 없어졌다. 모든 경로가 기본적으로 정확히 일치하게 되었기 때문이다.

3. render -> element

이전에는 컴포넌트를 렌더링 하기 위해 render 속성에 컴포넌트를 반환하는 함수를 넣어줘 컴포넌트를 렌더링 하였다. v6에서는 element 속성을 통해 컴포넌트를 바로 넣어줄 수 있도록 바뀌었다.

<Route path="/main" element={<Main />} />

4. useHistory -> useNavigate

v6에서는 useHistory 훅이 useNavigate로 이름이 변경되었다. useHistory를 제대로 사용해보진 않았지만 혹시나 이 글을 보고 득을 얻어가시는 분이 있다면 그걸로 만족...

import { useNavigate } from "react-router-dom";

const Login = () =>{
    const navigator = useNavigate();
    const goToMain = () => {
        navigator('/main');
    }  
    return (
        ...
      	<button type="button" onClick={goToMain}>메인으로 이동</button>
    )
}