[React] react-router-dom v6 동작원리

---

react-router-dom은 리액트를 사용하는데 있어 바뀌는 주소에 따라 보여질 컴포넌트를 정할 때 당연하게 사용되어진다. 라이브러리라고는 인지하지 못할 정도로 밀접하고 자연스레 사용되어지는 react-router-dom에 대해 알아보자 🙂

 

react-router-dom이란?

페이지를 새로 불러오지 않고 각 상황에서 선택된 데이터를 하나의 페이지에서 랜더링해주는 라이브러리이다.

MPA로 웹페이지를 구현할 때는 각각의 주소에 맞는 html 파일을 보여주면 되었지만, 대표적인 SPA인 리액트에서는 페이지 전환을 표현하기 위해 react-router-dom이 필요하다. (실제 페이지 이동이 아닌 각각의 페이지에 필요한 컴포넌트들을 불러와서 보여주는 것이기 때문에 '페이지 전환을 표현한다'라고 적어놨으니 참고!)

---

참고로 리액트는 index.html의 div 앨리먼트 하나만 두고 자바스크립트 모둔 부분을 동적으로 랜더링하는 구조이며, 별도의 라이브러리 없이 state만으로도 라우팅을 할 수 있다. (ex. onClick 이벤트 등)

import { useState } from "react";
import Home from "./components/Home";
import Profile from "./components/Profile";
import SubPage from "./components/SubPage";
import "./styles.css";

export default function App() {
  const [cate, setCate] = useState(Home);
  
  return (
    <div className="App">
      <header>
        <button onClick={() => setCate(Home)}>Home</button>
        <button onClick={() => setCate(SubPage)}>SUb</button>
        <button onClick={() => setCate(Profile)}>Profile</button>
      </header>
      <main>{(children = cate)}</main>
    </div>
  );
}

하지만 그럴 경우 문제점들이 있다.

1. 새로고침시 state값이 초기화되어 무조건 맨 처음 페이지로 넘어간다.
2. 고유 URL 주소가 없어 즐겨찾기가 불가능하다.
3. 뒤로가기 버튼이 눌리면 해당 웹사이트 내 이전 페이지가 아닌 이전 웹사이트로 이동한다.

이러한 문제들로 react-router를 사용하는 것이다.

---

react-router와 react-router-dom의 차이는?
react-router-dom은 react-router v4에서 처음 릴리즈된 라우팅 모듈로 react-router 모듈 + dom이 바인딩 되어 있는 모듈이다. v3까진 react-router 모듈 하나만을 사용할 수 있었는데, v4 이후 react-router 모듈을 코어로하여 웹 개발자를 위한 react-router-dom과 앱 개발자를 위한 react-router-native가 릴리즈 되었다.

---

Client Side Routing이란?

서버에게 별다른 요청을 보내지 않고 클라이언트의 브라우저 단에서만 여러 페이지들을 방문할 수 있는 기능을 의미한다.

 

클라이언트 사이드 라우팅의 핵심 요소 3가지

1. 현재 URL에 맞는 UI/컴포넌트를 랜더링할 수 있어야한다.
2. 페이지의 reload 없이 다른 페이지를 방문할 수 있는 네비게이션 기능이 있어야한다.
3. 사용자의 행동(앞으로 가기, 뒤로가기)에 의해 변경되는 URL을 감지하고 처리할 수 있어야 한다.

장점

   >> 각 주소별 리소스가 구분되어 있어 한 번에 랜더링되는 데이터의 양이 적기 때문에 라우팅 속도가 빠르다.

단점

   >> SEO가 어렵다.

   >> 외부 라이브러리 사용이 필요하다. (외부 패키지에 대한 의존성 향상)

 

---

react-router-dom 내장 컴포넌트

<BrowserRouter> | <Routes> | <Route> | <Link>

라우팅할 컴포넌트들을 <BrowserRouter>로 감싸고, <Route>로 컴포넌트별로 원하는 URL주소를 할당한다. 그리고 <Routes>로 감싸면 그 중 주소가 일치하는 라우트 단 하나만 랜더링 시켜주는 역할.

❕ react-router-dom v6부터 <Switch />는 <Routes />로 대체되었습니다.

 

//App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './Main';
import Login from './Login';
import Info from './Info';

function App() {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Main />} />
				<Route path="/login" element={<Login />} />
				//전달할 props가 있는 경우 아래와 같이
				<Route path="/info" element={<Info userInfo={userInfo} />} />
			</Routes>
		</BrowserRouter>
	);
}

export default App;

---

이와 같이 <BrowserRouter>로 감싸져 있고, Route를 통해 경로로 접근할 수 있는 컴포넌트에는 기본적으로 props로 history, location, match 객체를 전달한다.

 

history 객체는 SPA 특성을 지키며 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.

match 객체는 어떤 라우트에 매칭되어있는지에 대한 정보를 가지고 params에 설정한 파라미터 정보를 가지고 있다.

location 객체는 현재 페이지에 대한 정보를 가지고 있다. URL쿼리 정보를 search 프로퍼티 안에 갖고 있다.

 

---

참고

승무원의 개발자되기 프로젝트

[React] react-router 동작 원리 간단히 알아보기

REACT_Router 1.리액트 라우터 - 기본개요

Feature Overview