본문 바로가기
React

18. 라우팅과 네비게이션 - 1

by leo2114 2024. 2. 19.
반응형

React Router 소개와 사용법

React Router는 React 애플리케이션에서 페이지 네비게이션을 관리하는 라이브러리로, SPA(Single Page Application)를 개발할 때 매우 유용합니다. 이번 글에서는 React Router의 소개와 기본적인 사용법을 알아보겠습니다.

React Router 소개

React Router는 React 애플리케이션의 라우팅을 처리하는 라이브러리로, 여러 페이지 간의 전환을 가능하게 합니다. 브라우저의 URL을 기반으로 컴포넌트를 렌더링하므로, 사용자가 애플리케이션에서 다른 페이지로 이동할 때 페이지 전체를 다시 로드하지 않고 필요한 부분만 업데이트할 수 있습니다.

React Router의 주요 컴포넌트

  1. BrowserRouter: HTML5의 History API를 사용하여 브라우저의 주소와 UI를 동기화하는 컴포넌트입니다.
  2. Route: 특정 URL에 대한 라우팅 규칙을 정의하고 해당 URL에 해당하는 컴포넌트를 렌더링합니다.
  3. Link: 애플리케이션에서 다른 경로로 이동하는 하이퍼링크를 생성합니다.

React Router의 기본 사용법

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

const Home = () => <h1>홈 페이지</h1>;
const About = () => <h1>소개 페이지</h1>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">홈</Link>
            </li>
            <li>
              <Link to="/about">소개</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};

export default App;

코드 설명

  1. Router 컴포넌트: BrowserRouter를 사용하여 라우터를 설정합니다.
  2. Link 컴포넌트: 페이지 간의 이동을 위한 하이퍼링크를 생성합니다.
  3. Route 컴포넌트: 특정 URL에 대한 라우팅 규칙을 정의하고 해당 URL에 해당하는 컴포넌트를 렌더링합니다.

마무리

React Router를 사용하면 React 애플리케이션에서 쉽고 효율적으로 페이지 네비게이션을 관리할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 SPA의 장점을 최대한 활용할 수 있습니다. React Router의 다양한 기능을 활용하여 보다 다이내믹하고 유연한 애플리케이션을 개발해보세요!

반응형