React.js Router DOM - 리액트 라우터 돔

React Router DOM의 주요 기능

---

React는 '단일 페이지 애플리케이션(SPA)'을 만드는 데 주로 사용됩니다. 

SPA는 기본적으로 HTML 파일 하나만을 로드한 뒤, JavaScript를 통해 화면의 내용을 동적으로 바꾸는 방식입니다. 

하지만 이 방식에서는 페이지 이동 시 주소창의 URL이 바뀌지 않아 사용자가 혼란스러울 수 있고, 브라우저의 '뒤로 가기'나 '앞으로 가기' 기능이 제대로 작동하지 않는 문제가 발생합니다.

React Router DOM은 바로 이러한 SPA의 문제를 해결하고, 실제 웹사이트처럼 URL 주소에 따라 다른 화면을 보여주고 페이지 이동을 관리할 수 있도록 해주는 도구입니다.

---

---

React Router DOM의 주요 기능

---

라우팅 (Routing)
URL에 따른 화면 렌더링: 특정 URL 경로(예: /about, /products)에 접근했을 때, 미리 지정된 React 컴포넌트를 화면에 보여주는 기능입니다. 

마치 웹사이트의 주소를 입력하면 해당 페이지가 나타나는 것과 같은 역할을 합니다.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

위 코드는 사용자가 / 경로로 접속하면 HomePage 컴포넌트를, /about 경로로 접속하면 AboutPage 컴포넌트를 렌더링하도록 설정합니다. 

---

중첩 라우트 (Nested Routes)

복잡한 웹 애플리케이션에서는 하나의 페이지 안에서도 여러 섹션이 존재하고, 그 섹션들 또한 URL에 따라 내용이 바뀔 수 있습니다. 

React Router DOM은 이러한 경우 부모 라우트 아래에 자식 라우트를 중첩하여 구성할 수 있게 해줍니다. 

예시: /dashboard/profile과 같이 dashboard 안에 profile 페이지가 있는 경우를 쉽게 구성할 수 있습니다.

---

페이지 이동 (Navigation)

사용자가 웹 페이지를 탐색할 수 있도록 도와주는 기능입니다.

<Link> 컴포넌트: 

HTML의 <a> 태그와 유사하게, 클릭 시 다른 라우트(페이지)로 이동하게 해줍니다. 

브라우저의 전체 새로고침 없이 빠른 이동이 가능합니다. 

---

URL 파라미터 (URL Parameters)

동적으로 변하는 데이터를 URL을 통해 전달받을 수 있게 해줍니다. 

예를 들어, /products/1과 같이 1번 상품 정보를 볼 때 사용합니다. 

useParams 훅을 통해 URL에서 이 1이라는 값을 추출할 수 있습니다.

---

---

React Router DOM의 주요 컴포넌트

---

BrowserRouter

BrowserRouter는 React Router의 가장 기본적인 라우터로, HTML5의 History API를 사용하여 URL과 UI를 동기화합니다. 

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 라우팅 관련 컴포넌트들이 여기에 위치합니다 */}
    </BrowserRouter>
  );
}

jsx

---

HashRouter

HashRouter는 URL의 해시(#) 부분을 사용하여 라우팅을 관리합니다.

주로 정적 웹 호스팅에서 사용되며, 서버 설정이 필요 없습니다. 

import { HashRouter } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      {/* 라우팅 관련 컴포넌트들이 여기에 위치합니다 */}
    </HashRouter>
  );
}

jsx

---

Routes와 Route

Routes는 여러 Route를 감싸는 컴포넌트로, 현재 URL과 일치하는 첫 번째 Route를 렌더링합니다. 
Route는 특정 URL 경로와 렌더링할 컴포넌트를 연결합니다. 

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

jsx

---

Link

Link 컴포넌트는 페이지를 새로고침하지 않고 다른 경로로 이동할 수 있게 해주는 컴포넌트입니다.

HTML의 <a> 태그와 유사하지만, 브라우저의 기본 동작을 방지하고 클라이언트 사이드 라우팅을 수행합니다. 

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

function Navigation() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
      <Link to="/contact">연락처</Link>
    </nav>
  );
}

jsx

---

NavLink

NavLink는 Link의 확장 버전으로, 현재 활성화된 링크에 스타일을 적용할 수 있습니다.

현재 URL과 일치할 때 특별한 스타일이나 클래스를 적용할 수 있어 네비게이션 메뉴 구현에 유용합니다.

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink 
        to="/" 
        style={({ isActive }) => isActive ? { color: 'red' } : undefined}
      >
        홈
      </NavLink>
      <NavLink 
        to="/about"
        className={({ isActive }) => isActive ? 'active-link' : ''}
      >
        소개
      </NavLink>
    </nav>
  );
}

jsx

---

Nested Routing (중첩 라우팅)

중첩 라우팅은 라우트 내에 하위 라우트를 정의하는 방식으로, 복잡한 UI 구조를 구현할 때 유용합니다. 

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        {/* 중첩된 라우트들 */}
        <Route index element={<DashboardHome />} />
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

// Dashboard 컴포넌트 내에서 Outlet을 사용하여 중첩 라우트 렌더링
function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <nav>
        <Link to="/dashboard">홈</Link>
        <Link to="/dashboard/profile">프로필</Link>
        <Link to="/dashboard/settings">설정</Link>
      </nav>
      <Outlet /> {/* 중첩된 라우트가 여기에 렌더링됩니다 */}
    </div>
  );
}

jsx

---

이렇게 React Router DOM의 주요 컴포넌트들을 활용하면 단일 페이지 애플리케이션(SPA)에서도 여러 페이지처럼 동작하는 웹 애플리케이션을 쉽게 구현할 수 있습니다.

---

---

install

 

googling

 

search - react router dom

 

quick start

 

https://reactrouter.com/

 

https://reactrouter.com/tutorials/quickstart

 

 

npm install react-router-dom

 

or

npx create-react-router@latest

 

terminal

---

https://reactrouter.com/api/components/Link

 

https://reactrouter.com/api/components/Links

 

https://reactrouter.com/api/components/NavLink

 

https://reactrouter.com/api/components/Route

 

https://reactrouter.com/api/components/Routes

 

https://reactrouter.com/api/hooks/useParams

 

reactrouterdom02.PNG

0.07MB

reactrouterdom03.PNG

0.11MB