react-router-dom (1/2) 정의와 필요성

manNomi·2025년 1월 1일

WEB

목록 보기

7/9

react-router-dom 을 매번 사용하고 있지만 동작구조와 최적화의 연계를 생각해본적이 없습니다. 실제로 window history를 어떻게 이용하는지 차이는 무엇이 있는지 고민해본적이 없었습니다. 따라서 react-router-dom 의 이점과 필요성에 대해 공부해보도록 하겠습니다!

첫번째로 정의!!

React Router DOM은 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리입니다. 이를 통해 SPA(Single Page Application)에서 URL을 기반으로 컴포넌트를 렌더링하고, 페이지 전환 없이 동적인 사용자 경험을 제공합니다.

☑️ 쉽게 생각하면 React Router DOM은 URL을 상태화(stateful)하여, SPA(Single Page Application)에서 페이지 전환 없이 애플리케이션의 경로(Route)에 따라 컴포넌트를 동적으로 렌더링할 수 있도록 해주는 라이브러리입니다.

이를 통해 URL이 변경될 때 브라우저의 기본 새로고침 동작 없이도 사용자가 마치 페이지가 전환된 것처럼 느껴지도록 해준다.

URL 경로, 쿼리 파라미터, 패스 파라미터 등을 상태처럼 관리하며, 브라우저 히스토리와 동기화하여 사용자가 “페이지 전환”처럼 느낄 수 있는 사용자 경험을 이끌어 낼 수 있게 해주는 것 !

url state화!!

두번째로 필요성

☑️ React Router DOM의 필요성은 주로 SPA(Single Page Application) 구조에서의 효율적이고 사용자 친화적인 네비게이션을 가능하게 하는 데 있습니다.

React Router DOM이 없다면 URL 관리와 페이지 전환의 복잡성을 직접 처리해야 하므로 개발 생산성과 사용자 경험 모두 크게 저하될 수 있습니다.

리액트 이전의 웹에서는 주로 태그를 사용하여 페이지 이동을 구현했습니다.
그러나 태그를 사용하면 페이지 이동 시마다 전체 페이지가 새로고침(리로드)되는 단점이 있었습니다.
이 문제를 해결하기 위해 리액트는 Virtual DOM과 함께 react-router-dom을 사용하여 페이지 리로드 없이도 동적으로 라우팅을 처리할 수 있게 했습니다.

SPA에서 페이지 전환 구현

SPA(Single Page Application) 구조에서는 전체 HTML을 다시 로드하지 않고도 URL에 따라 다른 컴포넌트를 렌더링해야 함.
React Router DOM은 이를 쉽게 구현할 수 있도록 URL과 컴포넌트를 매핑해주는 역할을 담당.

브라우저 새로고침 없는 네비게이션

브라우저의 기본 동작(페이지 새로고침)을 제거하고, URL 변경만으로 상태를 전환하도록 지원.
사용자 경험을 부드럽고 빠르게 만들어줌.

URL 상태 관리의 필요성

URL은 애플리케이션 상태의 중요한 부분 (예: 현재 페이지, 동적 데이터, 쿼리).
React Router DOM은 URL을 React 상태처럼 다룰 수 있게 해줌으로써 데이터 요청, 필터링, 페이지 전환 등을 간단히 처리.

SEO 및 URL 공유 기능

URL을 상태처럼 관리하므로, 사용자가 특정 페이지 상태를 공유하거나 저장할 수 있음.
SEO와 SSR(Server-Side Rendering)과 결합해 검색 엔진 최적화에도 기여.

복잡한 네비게이션 로직 처리

동적 라우팅, 중첩 라우팅, 리다이렉션 등 복잡한 네비게이션 요구사항을 쉽게 구현 가능.
URL 기반 상태와 컴포넌트 간의 관계를 명확히 정의해 유지보수성과 확장성 향상.

세번째로 장점!!

React Router DOM의 장점

선언적 라우팅

URL 경로와 컴포넌트를 선언적으로 정의해 코드의 가독성과 유지보수성 증가.
라우트 구조를 한눈에 파악 가능.

React와의 강력한 통합

React의 컴포넌트 기반 구조와 완벽히 결합.
React 상태 관리(Context API, Redux 등) 및 라이프사이클과 자연스럽게 동작.

브라우저 API 추상화

브라우저의 History API를 직접 다룰 필요 없이 라우팅 로직을 단순화.
navigate와 같은 API로 간편하게 URL을 변경하고 상태를 전환 가능.

유연한 라우팅 지원

동적 라우팅(/users/:userId) 및 쿼리 파라미터 관리(/search?query=react).
중첩 라우트, 조건부 라우팅 등 다양한 네비게이션 패턴 지원.

사용자 경험 최적화

브라우저 새로고침 없이 URL을 업데이트해 빠르고 부드러운 페이지 전환 제공.
컴포넌트 간 전환 시 상태 유지 가능.

공유 가능성 및 북마크

URL을 통해 특정 상태를 공유하거나 페이지를 북마크 가능.
URL 기반 상태 관리로 쉽게 페이지를 재구성.

SEO 친화적

SSR(Server-Side Rendering)과 결합하여 검색 엔진이 라우팅 경로를 크롤링할 수 있도록 지원.

다양한 훅 지원

useParams, useNavigate, useSearchParams와 같은 유틸리티 훅을 제공해 동적 파라미터 처리 및 URL 관리 간소화.

지금까지 정의 필요성 장점에 대해서 알아 보았으니 간단한 예시와 함께 사용 해보도록 하겠습니다.

// App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

// 간단한 컴포넌트 정의
const Home = () => <h1>홈 페이지</h1>;
const About = () => <h1>소개 페이지</h1>;
const Profile = ({ userId }) => <h1>사용자 프로필: {userId}</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        {/* 네비게이션 링크 */}
        <Link to="/">홈</Link> | <Link to="/about">소개</Link> | <Link to="/profile/123">프로필</Link>
      </nav>

      <Routes>
        {/* Route로 경로와 컴포넌트를 매핑 */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile/:userId" element={<ProfileWithParams />} />
      </Routes>
    </Router>
  );
};

// 동적 파라미터 처리
const ProfileWithParams = () => {
  const { userId } = useParams(); // userId 추출
  return <h1>사용자 프로필: {userId}</h1>;
};

export default App;