리액트 라우터는 SPA(Single Page Application)를 리액트를 통해 구현하는데 필요한 라이브러리입니다.

1. React Router(v6) 설치하기

먼저 리액트 라우터 V6를 설치해보았습니다.

1. 라우터 라이브러리 설치하기

	$ npm stall react-router-dom@6 

2. 설치 확인하기

		{
"name": "teamb",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.16.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
}

리액트 라우터(v6)가 잘 설치되었는지 확인해줍니다.

2. 경로설치

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

메인페이지에 설치한 패키지를 가져옵니다. 경로 설치를 위해 필요한 함수들은 'BrowserRouter', 'Routes', 'Route' 이렇게 세 가지입니다.

BrowserRouter

경로를 인식하기 위한 태그로 세부경로 구분을 위해 '/'를 사용합니다

Routes

라우터들을 포함합니다. 버전 6 이후로 라우터들은 반드시 이 태그 안에 포함되어야 정상 작동합니다

Route

컴포넌트의 경로를 지정합니다. path속성에 사용된 경로를 포함한 경로를 열기 때문에 루트 경로인 '/'의 경우 다른 컴포넌트가 열릴 때 항상 같이 열리는 데 이를 방지하기 위해 'exact'옵션을 추가합니다

3. BrowserRouter로 감싸기

BrowserRouter는 HTML5의 History API를 사용하며 기본적인 기능을 쉽게 사용할 수 있도록 해주며 정보들을 확인할 수 있게 해 줍니다. 또한 URL과 UI를 동기화시켜줍니다.

import './App.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Infomation from './component/Infomation';
import Detail from './component/Detail';
import Connect from './component/Connect';
import Header from './component/Header';
import Main from './component/Main';


function App() {
  return (
   <>
    <BrowserRouter>
      <nav>
      <ul>
        <li><Link to={'/Header'}>About</Link>
        </li>
        </ul>
      </nav>
    
    <Routes>
      <Route path='/' element={<Main />} />
      <Route path="/Header" element={<Header />} />
    </Routes>
    </BrowserRouter

4. Link 사용하기

import { Link } from 'react-router-dom'

내비게이션 컴포넌트로 이동하여 Link를 불러옵니다.

<Link to={'/'}>Home</Link>
to를 활용하여 경로를 설정합니다.

5. 리액트 라우터 장점

React Router를 사용하면 전체 페이지가 교체되지 않고 업데이트 된 부분만 새로 렌더링됩니다.

또한 각각의 컴포넌트마다 URL가 생겨 북마크 또는 히스토리 기능을 사용할 수 있게 되었습니다.

즉 React Router는 리액트에 path를 추가해서 기존의 장점을 유지하는 것뿐만 아니라 단점까지 개선한 것입니다.