리액트에서 Router로 페이지 이동하기

📍Routing

Routing은 다른 경로(url 주소)에 따라 다른 화면을 보여주는 것을 의미한다.

📍MPA와 SPA의 라우팅 방법 비교

기존의 웹페이지에서는 html에 a 태그를 통해 링크를 걸고, 화면에서 해당 링크를 클릭했을 때 다른 html 페이지로 이동하는 방식으로 라우팅을 했다. 이건 html페이지가 여러개로 존재하는 MPA(Multi Page Application) 일때 라우팅을 하는 방식이다.

하지만 리액트에서는 html 페이지가 하나인 SPA(Single Page Application) 이기 때문에 위 방식과는 다르게 라우팅을 구현해야 한다.
(리액트는 Framework가 아닌 Library이기 때문에 라우팅 기능이 내장되어있지 않기 때문에 별도의 Library를 설치해서 라우팅을 구현해야 함)

📍SPA 라우팅 방법

리액트의 라우팅 방법은 아래와 같다.

$ npm install react-router-dom

❶ 라우팅 기능이 필요한 프로젝트에서 터미널을 열고 해당 라이브러리를 설치한다.
❷ 설치 완료 후 package.json에서 react-router-dom이 잘 설치되었는지 확인❗️
❸ index.js 파일에 router 컴포넌트 생성
❹ router.js 파일 생성(index.js 파일과 같은 위치에 생성하기)
❺ router 컴포넌트 구현(아래 예시 참조⬇️)

// Router.js

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

const Router = () => {
	return (
		<BrowserRouter>                                   
         <Routes>                                         
          <Route path='/' element={<Login />} />   
          <Route path='/signup' element={<Signup />} /> 
         </Routes>
       </BrowserRouter>
	);
};

export default Router;

⛔️ 이렇게 했는데 연결이 라우팅이 안될 경우, ❸번에서 index.js 파일에 생성한 router 컴포넌트가 아래 예시처럼 작성되었는지 확인 필요

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';

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

📍Route 이동하기

1. Link 컴포넌트

   • 클릭시 바로 이동, 조건 없이 페이지를 이동할 때 적합하다.
     (Nav Bar의 메뉴 혹은 Aside Menu에서 활용 가능)

2. useNavigate hook

   • 조건에 따라 페이지를 전환해야 할 때 사용하기 적합하다.
     (로그인 버튼 클릭 시에 백엔드 API로 데이터를 전송하는 작업을 한 뒤 페이지를 이동하거나 인증/인가가 필요한 경우, 혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 하는 상황일 때, useNavigate를 사용한다.)