[React] React-Router-Dom V6의 동작원리

react-router-dom 

---

📄 목차

1. 라우팅(Routing)이란?

     1.1 React에서 라우트 시스템 구축을 위한 두 가지 선택지?

2. SPA(싱글 페이지애플리케이션)이란?

3. 라우터 기능 파악하기

     3.1 react-router-dom 내장 컴포넌트

4. BrowserRouter, Routes, Route 

      4.1 Link

5. 중첩 라우팅

---

1. 라우팅(Routing)이란? 

- 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것

 

1.1 React에서 라우트 시스템 구축을 위한 두 가지 선택지?

1. React-Router-dom

= SPA 개발

 

2. Next.js

=  React + express.js + 파일경로 기반 라우팅 + SEO(검색엔진최적화) + SSR(서버사이드렌더링)

---

💡리액트 라우팅은 기능만을 집중한 라이브러리이다. 
💡리액트 라우터를 사용하면 손쉽게 싱글 페이지 애플리케이션 (Single Page Application)을 만들 수 있다.

 

---

2. SPA(싱글 페이지애플리케이션)이란?

싱글 페이지 애플리케이션이란? 

- 한 개의 페이지로 이루어진 애플리케이션이라는 의미.

 

❓여기서 궁금한점❓

- 리액트 라우터를 사용하여 여러 페이지로 구성된 프로젝트를 만들 수 있다고 했었는데

왜? 싱글 페이지 애플리케이션이라고 불리는지 의문이 들 수 있다.

 

❗️이를 이해하기 위해선 SPA가 나오기 전에 사용되던 멀티 페이지 애플리케이션이 어떻게 작동하는지 살펴볼 필요가 있다.

 

 

멀티 페이지 애플리케이션

멀티 페이지 애플리케이션에서는?

- 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 주었다. 각 페이지마다 다른 html 파일을 만들어서 제공을 하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용하기도 했다.

 

 

❗️그러나❗️

- 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합⭕️하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않았다❌. 새로운 페이지를 보여주어야 할 때마다 서버 측에서 모든 준비를 한다면 그만큼 서버의 자원을 사용하는 것이고, 트래픽도 더 많이 나올 수 있기 때문이다. 

 

 

⭐️ 그래서 ⭐️

-  리액트 같은 라이브러리를 사용해서 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고 ▶️ 우선 웹 애플리케이션을 브라우저에 불러와서 실행시킨 후에 ▶️ 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트하는 방식을 사용하게 됐다.

 

💡이렇게 html은 한 번만 받아와서 웹 애플리케이션을 실행시킨 후에 👉🏻 그 이후에는 필요한 데이터만 받아와서 화면에 업데이트해주는 것이 싱글 페이지 애플리케이션이다.

---

3. 라우터 기능 파악하기

라우터를 만들기 위해 라우터의 기본적인 기능을 먼저 살펴보자!

1. 애플리케이션의 경로 목록들을 저장할 수 있다. (URL을 DOM 구성 요소에 매핑)
2. 현재 URL이 변경되면 페이지 콘텐츠를 해당 URL에 매핑된 구성 요소로 교체할 수 있다.
3. URL에서 path parameter나 query string을 식별할 수 있다.

---

 

3.1 react-router-dom 내장 컴포넌트

• BrowserRouter: html5의 history API를 이용해 UI 업데이트를 한다.
• Routes: Route로 생성된 자식컴포넌트 중에 path와 URL이 매칭되는 첫 번째 Route의 컴포넌트를 렌더링 한다.

 

❗️이전의 Switch가  -> Routes로 바뀌었는데

• Route: 컴포넌트 별로 원하는 url을 지정한다.
• Link: 클릭 시 지정한 URL로 이동하는 링크를 생성한다. 아예 새로운 페이지를 불러오므로 기존 컴포넌트의 상태값은 소멸된다.

---

4. BrowserRouter, Routes, Route 

- 위의 세 컴포넌트(BrowserRouter, Routes)는 SPA 구조에서 전체적인 라우팅 틀을 잡기 위해 사용한다.

라우팅 하고 싶은 컴포넌트들을 <BrowserRouter>,<Routes>로 감싸고 <Route>로 컴포넌트에 해당하는 URL을 지정해 준다.

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Page1, Page2, NotFound } from "../pages";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* <Route path="/*" element={<NotFound />} /> */} // -> X
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

❗️🖐🏻  '*'  같은 경우 와일드카드처럼 해당되는 모든 URL에 대해 대응한다.
이때!  순서가 중요한데, 만약 와일드카드로 지정한
<NotFound>의 라우트가 상단에 배치될 경우, 다른 URL로 라우팅 돼야 하는 경우에도
<NotFound>만 라우팅 하게 된다. (런타임)

---

4.1 Link

- 특정 주소로 넘어갈 수 있게 해 준다. 

import { Link } from "react-router-dom";

function MainPage() {
  return (
    <div>
      <h1>Users</h1>
       <Link to="/userInfo">UserInfo</Link>
    </div>
  );
}

 

❗️v5까지는 다음 링크처럼 Link에 props를 넣어서 전달할 수 있었으나
v6부터는 더 이상 link로 props를 전달하지 못하게 되었다.
👉🏻 커스텀 훅으로 link를 직접 만들어서 props를 전달하는 것을 구현할 수는 있다고 한다.

 

---

5. 중첩 라우팅

중첩 라우팅이란?

- 활성화된 페이지 컴포넌트 내에서 Route를 중첩하여 상위 Route와 하위 Route를 "동시에 활성화" 시켜주는 것이다.

💡즉, 하나의 Route만 활성화하는 것이 아니라 "여러 Route를 동시에 활성화" 하는 것이다.

 

5.1 Route 컴포넌트 내 Route 컴포넌트 중첩

<Routes>
    // "/경로a"와 "/경로a/경로b"일 때 활성화
    <Route path="/경로a" element={<ComponentA />}>
        <Route path="경로b" element={<ComponentB />}/> // "/경로a/경로b"일 때 활성화
    </Route>
</Routes>

- Route 컴포넌트 자식으로 Route 컴포넌트를 작성하는 방식으로 중첩 라우팅을 구현할 수 있다.

 

➕ 위 코드 중첩 라우터에서 Outlet컴포넌트도 함께 사용이 가능하다!!

~ 이 밖에도 컴포넌트 내부에서 Route 컴포넌트 중첩도 있고 여러 방법이 있다. 

 

 

 

 

참고

https://velog.io/@sham/react-router-dom-v6로-페이지-이동하기

https://velog.io/@kim98111/Routing#중첩-라우팅

https://velog.io/@soryeongk/ReactRouterDomV6#3-중첩-라우팅