React Router로 클라이언트 사이드 라우팅 구현하기

React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리로, 페이지 간의 전환 및 URL 기반의 컴포넌트 로딩을 관리하는 데 유용합니다. 이 글에서는 React Router의 기본 개념과 사용법을 알아보고, 간단한 예제를 통해 실제로 구현하는 방법을 살펴보겠습니다.

 

React Router란 무엇인가?

• React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 가능하게 하는 라이브러리입니다. 즉, 페이지 간의 전환을 쉽게 관리하고 URL을 기반으로 컴포넌트를 로딩할 수 있습니다.

React Router의 주요 컴포넌트:

• BrowserRouter: HTML5의 History API를 사용하여 클라이언트 사이드 라우팅을 처리하는 컴포넌트입니다.
• Route: 특정 URL 경로와 해당 URL에 대한 컴포넌트를 매핑하는 역할을 합니다.
• Link: 페이지 간의 하이퍼링크를 제공하는 컴포넌트로, 새로고침 없이 페이지를 전환할 수 있습니다.

728x90

React Router 예제:

• 아래는 React Router를 사용하여 간단한 페이지를 구현하는 예제입니다.

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

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

const App = () => (
    <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;

 

주의사항:

• React Router를 사용할 때에는 반드시 BrowserRouter 컴포넌트로 감싸야 합니다.
• Route 컴포넌트를 사용하여 URL 경로와 해당 URL에 대한 컴포넌트를 매핑할 수 있습니다.

React Router를 사용하면 React 애플리케이션에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있습니다.

반응형