[리액트] react-router-dom 사용법

소요 시간: 5분 조회수: 208

react-router-dom은 React 애플리케이션에서 라우팅을 관리하기 위해 사용하는 라이브러리로, 사용자가 애플리케이션 내에서 다른 페이지나 컴포넌트로 쉽게 이동할 수 있게 합니다. 특히 웹 브라우저 환경에서 사용되며, 동적 라우팅, 중첩 라우트, URL 파라미터, 리디렉션, 네비게이션 가드와 같은 주요 기능을 제공합니다.


react-router-dom이란?

react-router-dom은 React 애플리케이션에서 라우팅을 관리하기 위해 사용하는 라이브러리입니다. 라우팅은 사용자가 애플리케이션 내에서 다른 페이지나 컴포넌트로 이동할 수 있게 하는 기능을 말합니다. react-router-dom은 특히 웹 브라우저 환경에서 사용되며, 다음과 같은 주요 기능을 제공합니다:


react-router-dom이 필요한 이유

react-router-dom이 필요한 이유는 React 애플리케이션에서 사용자가 다양한 페이지 간에 쉽게 이동할 수 있도록 라우팅 기능을 제공하기 때문입니다. 라우팅은 특히 단일 페이지 애플리케이션(SPA)에서 중요하며, 다음과 같은 이유로 필요합니다:

단일 페이지 애플리케이션(SPA)에서의 라우팅

SPA에서는 전체 페이지를 새로 고침하지 않고도 URL을 변경하고 다른 콘텐츠를 로드할 수 있어야 합니다. react-router-dom은 이 과정을 원활하게 처리해 줍니다.

구성 요소 간의 네비게이션

react-router-dom을 사용하면 애플리케이션 내의 다른 컴포넌트로 쉽게 이동할 수 있습니다. 이를 통해 사용자 경험을 개선하고, 사용자가 필요로 하는 정보를 빠르게 접근할 수 있게 합니다.

URL 관리를 통한 상태 유지

URL에 상태를 포함시켜서 브라우저의 뒤로 가기, 앞으로 가기 기능을 사용할 수 있습니다. 이는 사용자가 특정 페이지를 북마크하거나 URL을 통해 직접 접근할 때 유용합니다.

동적 라우팅

react-router-dom은 동적 라우팅을 지원하여 URL 매개변수를 기반으로 컴포넌트를 렌더링할 수 있습니다. 예를 들어, 사용자 프로필 페이지에서 사용자 ID를 URL 매개변수로 받아 해당 사용자에 대한 정보를 표시할 수 있습니다.

중첩된 라우트(Nested Routes)

react-router-dom을 사용하면 중첩된 라우트를 쉽게 설정할 수 있습니다. 이는 복잡한 애플리케이션 구조를 더 관리하기 쉽게 만듭니다.

리디렉션 및 네비게이션 가드

특정 조건에 따라 사용자를 다른 경로로 리디렉션하거나, 접근을 제한할 수 있는 기능을 제공합니다. 이는 보안 및 사용자 흐름 제어에 유용합니다.

간단한 설정과 사용

react-router-dom은 비교적 간단하게 설정하고 사용할 수 있어, 초보자도 쉽게 라우팅 기능을 구현할 수 있습니다. 직관적인 API와 풍부한 문서를 제공하여 개발자가 빠르게 학습하고 적용할 수 있도록 돕습니다.


사용 예시

기본적인 사용 예시는 다음과 같습니다:

설치

먼저, react-router-dom을 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install react-router-dom

기본 설정

react-router-dom의 기본 설정은 Router, Route, Switch 컴포넌트를 사용하여 이루어집니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

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

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

export default App;

위 코드를 간단히 설명하자면,

BrowserRouter:

Link:

Switch:

Route:


결론

react-router-dom은 React 애플리케이션에서 라우팅 기능을 간편하게 구현할 수 있게 도와주는 강력한 도구입니다. 단일 페이지 애플리케이션의 효율적인 네비게이션, URL 관리를 통한 상태 유지, 동적 라우팅 지원 등 다양한 기능을 통해 사용자 경험을 향상시킬 수 있습니다. 직관적인 API와 풍부한 문서를 통해 초보자도 쉽게 접근할 수 있으며, 다양한 애플리케이션에서 효율적인 라우팅을 구현할 수 있습니다.

인기글

리액트 리스트