[React] React-Router (리액트 라우터) 설치 및 세팅

1. 라우팅이란?

지금까지는 단일 페이지의 앱을 만들었다. 하지만 우리가 아는 대부분의 웹/앱은 여러 페이지가 있고 페이지를 이동할 수 있다.

 

React는 SPA(Single Page Application)방식으로 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

 

즉 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에 내용을 바꿔치기 해주는 라이브러리 라고 볼 수 있다.

 

2. 리액트 라우터(React Router)

1) 종류

사용자가 입력한 주소를 감지하는 역할, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.

ex) BrowserRouter, HashRouter

 

- BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지한다.

- HashRouter : 해시주소 (http://yyoonngg.tistory.com/#test)를 감지한다.

 

2) 설치 및 라우터세팅

2-1)

- npm

$ npm install react-router-dom

- yarn 

yarn add react-router-dom

 

2-2)

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

BrowerRouter를 import해주고 <App/>을 <BrowserRouter>로 감싸준다.

 

2-3)

App.js

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Home from './page/Home';

function App() {
	return(
    	<div>
            <Routes>
            	<Route path="/" element={<Home />} />
            </Routes>
        </div>
    );
}

export default App;

<Route>는 path를 통해 url주소를 정해주고, element로 보여줄 컴포넌트를 지정해준다.

<Routes>는 모든 <Route>를 감싸주는 역할이다.

 

 navbar처럼 모든 페이지에 포함되어 있는 영역같은 경우는 모든<Route>에 내용을 추가해야하기 때문에 번거롭다.

그래서 항상 페이지가 표시되는 요소들은 Routes 밖으로 꺼내면 된다.

예를 들어

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Home from './page/Home';
import Login from './page/Login';
import Navbar from './component/Navbar';

function App() {
	return(
    	<div>
            <Navbar />
            <Routes>
            	<Route path="/" element={<Home />} />
                <Route path="/login" element={<Login />} />
            </Routes>
        </div>
    );
}

export default App;

 

라우터 세팅은 이걸로 끝이다!

이제 유용한 React Hook과 Component들을 알아보자