[React] 리액트 Router란?

React Router는 SPA(Single Page Application)에서 클라이언트 측 라우팅을 구현하기 위한 표준 라이브러리입니다. 

React Router를 사용하면 페이지 간 전환을 빠르고 부드럽게 처리할 수 있어 사용자 경험이 향상됩니다.

 

 

react router - 커버 이미지

 

목차

1. Router 설치

2. Router 기본 개념

3. 중첩 라우팅 (Nested Routing)

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Router 설치

React Router를 사용하려면 다음 명령어로 react-router-dom 패키지를 설치해야 합니다

npm install react-router-dom

 

2. Router 기본 개념

2.1. BrowserRouter

BrowserRouter는 History API를 사용하여 URL과 컴포넌트 상태를 동기화합니다. 애플리케이션에서 이 컴포넌트를 루트로 설정하면, 그 하위에서 라우팅 기능을 사용할 수 있습니다. 즉, 이 컴포넌트를 최상위 컴포넌트에서 감싸주면 모든 곳에서 사용할 수 있습니다.

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

function App() {
  return (
    <BrowserRouter>
      ...
    </BrowserRouter>
  );
}

export default App;

2.2. Routes와 Route

Routes는 여러 경로를 정의하고, 위에서부터 순차적으로 검사하여 하나의 경로가 매칭되었을 때 해당하는 Route를 렌더링합니다. 각 Route는 특정 URL 경로에 해당하는 컴포넌트를 정의합니다.

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

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

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

export default App;

 

위 코드에서는 / 경로에서는 Home 컴포넌트가 렌더링되고, /about 경로에서는 About 컴포넌트가 렌더링됩니다.

2.3. Link

Link 컴포넌트는 HTML의 <a> 태그와 유사하지만, 페이지를 새로고침하지 않고 경로를 변경할 수 있는 방법을 제공합니다.

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link> // 페이지 새로고침 없이 / 경로로 이동
      <Link to="/about">About</Link> // 페이지 새로고침 없이 /about 경로로 이동
    </nav>
  );
}

 

Link 컴포넌트를 사용하면, 경로 이동 시 페이지 새로고침 없이 URL이 변경되고 해당하는 컴포넌트가 렌더링 됩니다.

2.4. navigate

navigate는 사용자를 다른 경로로 이동시킬 때 사용됩니다. 특정 조건이 충족되거나, 사용자가 어떤 동작을 했을 때 경로를 변경할 수 있습니다.

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

function GoToHome() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };

  return <button onClick={handleClick}>Go to Home Page</button>;
}

 

위 예시에서는 버튼을 클릭하면 / 경로로 이동합니다.

 

3. 중첩 라우팅 (Nested Routing)

React Router는 경로가 중첩될 수 있으며, 중첩된 경로는 부모 경로와 연동되어 작동합니다. 사용법은  Route 컴포넌트 안에다가 Route 컴포넌트를 배치하면 됩니다. 이때 하위 페이지에서 최상위 경로에 해당하는 경로는 path prop이 아니라 indexindex라는 prop을 사용하면 됩니다.

function App() {
  return (
    <Routes>
      <Route path="/about" element={<About />}>
        <Route index element={<AboutList />} />
        <Route path="1" element={<AboutItem />} />
      </Route>
    </Routes>
  );
}

 

 

React Router는 React 애플리케이션에서 페이지 간 이동을 간편하게 구현할 수 있는 클라이언트 측 라우팅 라이브러리입니다. 이를 통해 URL 기반의 상태 관리 및 동적 페이지 이동을 구현할 수 있으며, 사용자 경험을 크게 향상할 수 있습니다. React Router에서 기본적으로 제공하는 BrowserRouter, Routes, Route, Link, useParams, useSearchParams, navigate와 같은 기능들을 적절히 활용하면, 복잡한 라우팅 요구 사항도 쉽게 처리할 수 있습니다😀

 

 

추천글

[React] 리액트 Context

 

[React] 리액트 useCallback란?