The Ultimate React Course 2024: React, Redux & More 의 필기 위주로 작성되었습니다. 해당 강의는 강의 내용 기반으로 블로그 글 작성이 허용된 강의입니다.

SPA 실현의 핵심인 React Router에 대해 파고들어본다.

라우팅?

다른 URL들을 다른 UI 뷰들 (컴포넌트)에 매칭하는 과정이다. 이 URL과 컴포넌트간의 매치를 route라고 한다. 이를 통해 유저들은 다른 어플리케이션 스크린간 URL을 사용하여 이동이 가능하고, URL과 UI의 싱크를 맞출 수 있다. 해당 라우팅 방식은 클라이언트 측, 즉 유저의 브라우저에서 작동한다.

리액트에선 해당 라우팅을 React Router 라이브러리가 진행한다.

SPA

클라이언트쪽 (브라우저) 에서 완전히 작동되는 어플리케이션을 SPA, Single page application이라고 한다. SPA에선 자바스크립트가 URL 변경 시 DOM 업데이트를 담당한다.

전통적인 웹페이지에선 새 링크가 눌릴때 완전히 새로운 페이지를 로딩하고 이를 보여주지만, SPA에선 자바스크립트가 페이지를 업데이트 하기에 완전한 DOM 변경, 즉 완전한 페이지 reload가 이루어지지 않아도 된다. 이를 통해 우리의 SPA 웹앱은 네이티브 앱같은 경험을 제공한다.

그리고 이 SPA의 장점을 제대로 활용하고 페이지가 변경될 때 완전한 reload 없이 새로운 페이지를 띄우기 위해서 URL에 의존하는 라우팅이 필요하다.

React Router 사용

라우팅 선언 방법

크게 두가지 방법이 있다.

첫 방법은 아래와 같다:

import { Browser Router, Routes, Route } from "react-router-dom";

// function App()
<BrowserRouter>
  <Routes>
    <Route path="product" element={<Product />} />
    <Route path="*" element={<PageNotFound />} />
  </Routes>
<BrowserRouter/>

Honeycourses 프로젝트에서도 사용했던 비교적 명시적인 방법이다. *로 라우팅이 존재하지 않는 페이지를 catch 할 수 있다.

라우트 간 링킹

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

<Link to ='/pricing'>Pricing</Link>

...

<nav className={styles.nav}>
    <ul>
      <li>
        <NavLink to="/pricing">Pricing</NavLink>
       </li>
    </ul>
</nav>

위 방식을 사용하면 페이지 전체를 reload 하는 대신, DOM을 replace하면서 SPA에 부합하는 방식으로 라우트 간 링킹이 가능하다.