[React] React Router 가이드

웹 애플리케이션에서 라우팅은 사용자가 애플리케이션 내에서 다양한 페이지 또는 뷰를 탐색할 수 있게 해주는 기능입니다. React 애플리케이션에서는 주로 react-router-dom 라이브러리를 사용하여 라우팅을 구현합니다. 이 글에서는 React에서의 라우팅 기본, react-router-dom의 사용 방법, 그리고 동적 라우팅 구현에 대해 상세히 설명하겠습니다.

React 라우팅 기본

React는 기본적으로 SPA(Single Page Application)를 구축하기 위한 라이브러리입니다. SPA에서는 전통적인 웹 페이지처럼 페이지를 새로 불러오는 대신, JavaScript를 사용하여 동적으로 컨텐츠를 렌더링하고, 사용자와의 상호작용에 응답합니다. 이 과정에서 URL의 변화에 따라 다른 뷰를 보여주는 것이 바로 라우팅입니다.

react-router-dom 사용하기

react-router-dom은 React 애플리케이션을 위한 선도적인 라우팅 라이브러리입니다. 다음은 react-router-dom을 사용한 기본 라우팅 설정 방법입니다.

설치

먼저, 프로젝트에 react-router-dom을 설치합니다.

npm install react-router-dom

기본 라우팅 설정

BrowserRouter, Routes, Route 컴포넌트를 사용하여 라우팅을 설정할 수 있습니다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

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

export default App;

링크 설정

Link 컴포넌트를 사용하여 애플리케이션 내에서의 네비게이션을 구현할 수 있습니다.

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}

동적 라우팅

동적 라우팅을 통해, 애플리케이션은 URL의 일부를 변수로 사용하여 다양한 데이터를 기반으로 한 페이지를 동적으로 생성할 수 있습니다.

<Route path="/post/:id" element={<Post />} />

위 예제에서 :id는 동적 세그먼트로, 다양한 ID에 대한 Post 컴포넌트를 렌더링할 수 있게 해줍니다. 컴포넌트 내에서는 useParams 훅을 사용하여 이 동적 세그먼트의 값을 읽을 수 있습니다.

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

function Post() {
  let { id } = useParams();
  return <div>Post ID: {id}</div>;
}

결론

React에서 라우팅은 사용자가 애플리케이션 내에서 다양한 페이지로 이동할 수 있게 해주는 핵심적인 기능입니다. react-router-dom 라이브러리를 사용하면, 이러한 라우팅을 손쉽게 구현할 수 있습니다. 라우팅을 통해 SPA의 장점을 살리면서도, 사용자에게 여러 페이지로 구성된 전통적인 웹 사이트 경험을 제공할 수 있습니다. 동적 라우팅을 활용하면 URL에 따라 동적으로 컨텐츠를 제공하는 것도 가능해집니다. React 애플리케이션을 개발할 때 이러한 라우팅 기법을 적절히 활용해 보세요.