[React] Router란 무엇이며 어떻게 사용할까?

들어가며

---

요즘 저는 Vanilla JavaScript로 클론코딩한 결과물을 React로 바꿔보고 있어요. 바꾸면서 마주친 문제는 페이지 이동이었는데요. Login페이지의 로그인 버튼을 누르면 Main페이지로 이동하게 했었었어요. <a>로 경로 이동을 해주었었답니다! 하지만, React는 같은 프로젝트 내에서의 페이지를 이동할 때에는 <a>를 사용하지 않고, Router를 사용해야하더라구요🤔 그래서 오늘은 Router에 대해 정리하며 페이지 이동을 저는 어떻게 React로 바꿨는지 기록해두려고 해요!

React Router

---

CRA(create-react-app)로 세팅된 리액트 프로젝트 환경에서는 페이지 이동을 구현해낼 수 없는데요. 이는 리액트 라우터란 라이브러리로 해결할 수 있답니다!

📜 React Router란?
React Router는 리액트의 경로 이동을 위한 표준 라이브러리입니다.
w3school, React Router

🤷🏻‍♀️ 왜 CRA로는 페이지 이동이 안되죠?
CRA(create-react-app)으로 만들어진 웹페이지는 SPA(Single Page Application), 즉 페이지가 하나인 웹 애플리케이션이기 때문이에요. 이는 곧 HTML파일이 하나라는 말과 같아요. 따라서, 하나의 html에서 경로에 따라 다른 UI를 보여주기 위해선 React Router 라이브러리로 경로를 찾는 행위인 Routing(라우팅)을 해주어야 해요.

🔨 설치

프로젝트를 진행할 루트 폴더에서 아래 명령어를 실행시켜 React Router 라이브러리를 설치해줍니다.

npm i -D react-router-dom

설치가 완료되면 위 이미지처럼 package.json파일에 react-router-dom이 추가된 것을 확인할 수 있어요. 만약, 설치했지만 최신버전으로 다시 설치하고 싶다면 아래 명령어를 실행시켜주세요!

npm i -D react-router-dom@latest

🚚 Router 컴포넌트 생성

Routing 기능 구현을 위해서는 Router 컴포넌트를 만들어주어야해요. 저는 index.js파일이 존재하는 src폴더 안에 만들어줬어요.

앞서 설치한 react-router-dom패키지의 BrowserRouter, Routes, Route를 import합니다. 그리고 Login 컴포넌트와 Main 컴포넌트를 연결시켜주기 위해 두 컴포넌트도 import해주었어요.

// Router.js
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

위의 Router 컴포넌트를 보면 BrowserRouter 컴포넌트가 있고 그 속에 Routes와 Route컴포넌트가 있는걸 알 수 있어요. Login 컴포넌트를 디폴트 값(/)으로 설정했어요. 그래서 http://localhost:3000을 띄웠을 때 제일 첫 화면으로 Login컴포넌트가 나오게 돼요.

• BrowserRouter 컴포넌트 : 컴포넌트 주소 변경에 대한 기능 제공
• Routes 컴포넌트 : 여러 Route를 감싸 그 중 규칙이 일치하는 라우트 하나만을 렌더링
• Route 컴포넌트 : path와 element속성을 사용해 지정 path로 이동했을 때 어떤 컴포넌트를 보여줄지 element로 결정합니다.

🎨 Router 컴포넌트 화면에 그리기

앞서 생성한 Router 컴포넌트를 화면에 보여주기 위해선 index.js파일을 수정해야해요. Router 컴포넌트를 import해 root.render()안에 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 />);

🔗 페이지 연결시켜주기

Router 컴포넌트에서 어떤 경로로 이동해야(path) 특정 컴포넌트를 그려줄 것인지(element)를 설정해놓았어요. /main으로 이동하면 Main 컴포넌트로 이동하도록 말이죠.

아래는 Main페이지를 연결할 Login페이지에요. 버튼을 눌렀을 때 Main페이지로 이동하게 하기 위해서 useNavigate()를 사용했어요. 이렇게 '버튼을 눌렀을 때'라는 조건이 없을 때는 Link컴포넌트를 사용해 라우팅을 구현할 수도 있다고 해요.

// Login.js
import React from "react";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();
  return (
    <>
      	// 생략
		<button
			onClick={() => {
              navigate("/main");
 			}}
            id="btn-login"
            type="submit"
		>
    <>
  )
}

참고

---

w3school, React Router