[javascript] 리액트 라우터의 기본 개념과 사용 방법

22 Dec 2023

javascript

리액트 애플리케이션에서 페이지 간 이동을 가능하게 하는 리액트 라우터는 웹 애플리케이션 개발에 중요한 기능입니다. 이 블로그 포스트에서는 리액트 라우터의 기본 개념과 간단한 사용 방법을 알아보겠습니다.

리액트 라우터란?

리액트 라우터는 싱글 페이지 애플리케이션(SPA)에서 페이지 네비게이션 및 컴포넌트 간 전환을 관리하는 라이브러리입니다. SPA에서는 페이지 전환 시 화면 전체를 새로 고치지 않고 필요한 부분만 업데이트하며 더 나은 사용자 경험을 제공합니다.

리액트 라우터의 주요 컴포넌트

리액트 라우터에는 주요 컴포넌트가 있습니다:

<Router>: 모든 리액트 라우팅은 이 컴포넌트 안에서 이루어집니다.
<Route>: URL 경로에 따른 컴포넌트 매핑을 정의하는 데 사용됩니다.
<Link>: 페이지 간 이동을 위한 링크를 제공합니다.
<Switch>: 최초로 매칭되는 <Route>나 <Redirect> 요소를 렌더링합니다.

리액트 라우터 사용 방법

아래는 리액트 라우터의 간단한 사용 예제입니다.

리액트 라우터 설치

먼저, 아래 명령어를 사용하여 라우터를 설치합니다.

npm install react-router-dom

라우터 설정

라우터를 설정하고 원하는 URL 경로에 해당하는 컴포넌트를 매핑합니다.

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

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

function Contact() {
  return <h2>Contact</h2>;
}

마무리

이번 포스트에서는 리액트 라우터의 기본 개념과 간단한 사용 방법에 대해 알아보았습니다. 라우터를 이용하면 SPA에서의 효율적인 페이지 관리와 사용자 경험을 개선할 수 있습니다. 더 많은 기능과 옵션에 대해 알아보고 싶다면 공식 문서를 참고하세요.

목차

리액트 라우터란?

리액트 라우터의 주요 컴포넌트

리액트 라우터 사용 방법

마무리