리액트 | React Router를 이용한 페이지 이동 처리 (with. react-router-dom)

이 글에서는 react-router-dom을 사용하여 리액트에서 페이지 이동을 처리하는 방법에 대한 포스팅이다. 이 글에서 사용한 react-router-dom의 버전은 v6( v6.21.3 )이다.

---

라우팅이란?

라우팅(routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 때, 최적의 경로를 선택하는 과정을 의미한다. 여기서 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는 가장 적은 시간 안에 전송할 수 있는 경로이다.

웹에서 혹은 앱에서 라우팅의 의미는 사용자가 원하는 URL에 따라 알맞은 화면(페이지)을 보여주는 것이라고 생각할 수 있다. 리액트에서 SPA(Single Page Application)를 구현하기 위해 라우팅을 사용하게 되며, 라우팅을 구축하기 위해서는 크게 React Router와 Next.js를 사용하는 방법이 있다. 이번 글에서는 React Router를 사용하는 방법에 대한 포스팅이다.

SPA (Single Page Application)이란?
하나의 페이지에서 모든 어플리케이션(이하 앱)의 기능을 처리하는 방식으로, 기존 웹 페이지는 다른 페이지로 이동할 때 새로운 웹 페이지를 불러와 보여주는 방식이라면, SPA는 새로운 페이지를 로드하지 않고 필요한 데이터(바뀌는 부분)만 불러와 페이지가 바뀌는 방식이다.

URL에 따라 모든 페이지가 따로 만들어지는 것이 아니라 선택된 URL에 따라 필요한 데이터를 불러와 하나의 페이지에서 렌더링이 이루어진다.

※ 이와 관련하여 자세한 내용은 추후 정리 예정

---

React Router

React Router 설치

React Router를 사용하기 위해서는 react-router-dom을 설치해야 한다. 아래 명령어를 실행해 설치할 수 있다.

# 최신 버전 설치
npm install react-router-dom

# 특정 버전 설치
npm install react-router-dom@{version}

설치가 완료되면 package.json 파일의 dependencies에 추가되었는지 확인한다. 추가되어 있으면 정상적으로 설치된 것이다.

 

React Router 종류

React Router에서는 BrowserRouter와 HashRouter를 제공한다. 이 둘의 특징은 다음과 같다.

BrowserRouter

• history API를 활용하는 라우터
• 새로고침하거나 URL로 바로 접근하는 경우, 404에러가 발생 → 서버 측에서 따로 설정이 필요
• 대규모 프로젝트에 적합

HashRouter

• 주소에 해쉬(#)가 사용됨 (ex. www.exmaple.com/#testpage)
• 주소에 포함된 해쉬(#) 때문에 검색 엔진이 읽을 수 없음 → SEO가 좋지 않음
• 서버 측에서 특별한 설정이 없어도 새로고침을 하거나 URL로 바로 접근하더라도 에러가 발생하지 않음
• history API를 사용하지 않기 때문에 동적 페이지 구성에 불리
• 간단한 프로젝트를 진행하는 경우에 사용하는 것은 가능

이번 글에서 사용할 라우터는 BrowserRouter이다.

 

React Router 사용

리액트는 기본적으로 main.tsx에서 모든 렌더링이 이루어진다. 

// ./src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

위 코드를 보면 main.tsx에서 <App /> 컴포넌트를 렌더링함으로써 우리가 보는 페이지가 렌더링이 되는 것을 알 수 있다. 따라서 우리는 리액트 라우터를 <App /> 컴포넌트에 구성하게 된다.

 

<Home />과 <Profile />이라는 라우트를 만들고, 이를 App.tsx에서 그냥 불러온다면, 각 라우트는 단순히 컴포넌트로써 페이지에 동시에 출력된다.

// ./src/App.tsx
import Home from "./routes/home";
import Profile from "./routes/profile";

function App() {
  return (
    <>
      <Home />
      <Profile />
    </>
  );
}

export default App;

Home과 Profile 라우트가 하나의 페이지에서 렌더링된다.

이 두개의 라우트를 내가 원하는 페이지 경로에서 렌더링을 할 수 있도록 도와주는 것이 바로 리액트 라우터이다. 리액트 라우터를 세팅할 때에는 가장 많이 사용되는 BrowserRouter, Routes, Route 세 개의 모듈을 import 한다.

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

그리고 최상단에 BrowserRouter를 불러오고, 그 하단에 Routes를, 그리고 Route를 불러옴으로써 라우트를 구성한다.

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

<Route /> 컴포넌트는 기본적으로 path와 element 속성을 가지는데, path 속성에는 페이지 경로(상대 경로)를 입력하고, element 속성에는 렌더링하고 싶은 라우트(페이지)를 입력하면 된다. 위와 같이 설정하면, 메인 경로인 /에서는 <Home /> 라우트만 렌더링이 이루어지며, /profile 경로로 이동하면 <Profile /> 라우트가 렌더링된다.

/ 경로의 페이지 결과

/profile 경로의 페이지 결과

 

Link 컴포넌트로 페이지 이동

HTML에서 페이지를 이동할 때는 a 태그를 사용하여 페이지를 이동했다면, 리액트에서는 react-router-dom의 Link 컴포넌트를 사용하여 페이지를 이동할 수 있다. a 태그와 Link 컴포넌트의 가장 큰 차이점이라면, a 태그는 페이지를 이동할 때 브라우저가 새로고침되며 이동한 페이지를 렌더링하지만 Link 컴포넌트는 브라우저 새로고침 없이 다른 페이지로 이동시켜준다.

// ./src/routes/home.tsx
import { Link } from "react-router-dom";

function Home() {
  return (
    <>
      <div>
        <h1>여기는 메인페이지 입니다.</h1>
      </div>
      <div>
        <Link to="/profile">프로필</Link>
      </div>
    </>
  );
}

export default Home;

Link 컴포넌트는 to 속성을 갖는데, to 속성에 이동할 페이지의 상대 경로를 입력하면 된다. 링크를 클릭하면 원하는 경로의 페이지로 이동하게 된다. (변경이 필요한 컴포넌트만 새롭게 렌더링된다.)

링크 컴포넌트를 이용한 페이지 이동

---