Router란?

관련된 용어를 먼저 정리하자면 Route는 [경로]라는 의미를 담고 있고, Routing은 [경로를 찾는 행위], Router는 [Routing을 해주는 도구]라고 할 수 있다. 웹 개발에서 Routing은 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것을 의미한다.
그러나 React(리액트)는 Framework가 아닌 Library이기 때문에 라우팅 기능을 제공하지 않는다.
그래서 별도의 Library를 설치해서 라우팅을 구현해야 하고, CRA를 통해서 만들 웹 애플리케이션은 SPA이기 때문에 기존의 라우팅 방식과는 다르게 라우팅을 구현해야한다.

React-Router 설치

1.react-router-dom은 React에서의 라우팅을 위해 가장 많이 사용되는 라이브러리이다.

$ npm install react-router-dom

설치가 완료되었다면, package.json의 dependencies 항목에서 해당 패키지 명과 버전이 잘 추가되었는지 반드시 확인

2.Router 컴포넌트 생성

Router.js 파일은 src 폴더 안 index.js와 같은 위치에 생성

3.Router 컴포넌트 구현하기

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login/Login';                 
import Signup from './pages/Signup/Signup';               
import Main from './pages/Main/Main';                     
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Login />} />           
        <Route path='/signup' element={<Signup />} >     
        <Route path='/main' element={<Main />} />         
      </Routes>
    </BrowserRouter>
 );
};
export default Router;

4.Router 컴포넌트 활용

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Nav from './components/Nav/Nav';
import Footer from './components/Footer/Footer';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';
const Router = () => {
  return (
    <BrowserRouter>
      <Nav />                                          
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />                                       
    </BrowserRouter>
  );
};
export default Router;

경로에 상관없이 모든 화면에서 표시되어야 하는 컴포넌트 표현

5.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 컴포넌트 사용하기

첫 번째 방법은 Link 컴포넌트를 사용하는 방법으로 Route 컴포넌트의 path 값 중 일치하는 경로를 찾아 해당 컴포넌트를 화면에 그려준다.(Link 태그는 HTML의 a태그와 동일하게 그려진다.)
그렇다고 a 태그를 절대 사용하지 않아야 하는 건 아니다. 내부에서 url을 통해 페이지를 전환해야 할 때는 Link 컴포넌트를 이용해 효율적으로 이동할 수 있지만, 외부 사이트로 이동할 때는 항상 전체 페이지를 새로 받아와야 하기 때문에 a tag를 사용한다. 예를 들어, 특정사이트로 이동해야 하는 경우에는 a 태그를 사용한다.

import React from 'react';
import { Link } from 'react-router-dom';
const Login = () => {
  return <Link to="/signup">회원가입</Link>;
};
export default Login;

2.useNavigate hook 사용하기

react-router-dom에는 Link 컴포넌트 외에도 라우팅을 구현할 수 있게 해주는 hook이 존재하는데 아래와 같이 이동경로를 변수로 지정하고, 해당 변수를 이벤트에 담아 활용이 가능하다.

import React from 'react';
import { useNavigate } from 'react-router-dom';    
const Login = () => {
  const navigate = useNavigate();                     
  const goToMain = () => {                            
    navigate('/main');
  };
  return (
    <button className="loginBtn" onClick={goToMain}> 
      로그인
    </button>
  );
};
export default Login;

실제 활용 예시

const goToMain = () => {
  if (response.message === "valid user") {
    navigate("/main");
  } else {
    alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.");
    navigate("/signup");
  }
};