React Router

React Router란?

React Router는 Single Page Application(SPA)에서 페이지를 이동하는 것처럼 보이게 하는 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 페이지 이동 없이 (즉, 페이지를 새로 로딩하지 않고) 다양한 뷰를 볼 수 있습니다.

React Router는 react-router-dom 패키지 이름으로 설치할 수 있으며, 주요 컴포넌트로 BrowserRouter, Route, Switch(v5) 또는 Routes(v6) 등을 제공합니다.

React Router 설치

React Router를 설치하려면 터미널에서 다음 npm 명령어를 실행합니다:

npm install react-router-dom

 

React Router 사용하기

React Router를 사용하려면 먼저 BrowserRouter 컴포넌트로 애플리케이션을 감싸야 합니다. 이 컴포넌트는 React Router의 모든 기능을 사용할 수 있도록 하기 위해 필요합니다.

그 다음으로, Route 컴포넌트를 사용하여 특정 URL에 따라 보여줄 컴포넌트를 지정합니다. Route 컴포넌트의 path prop에는 매칭할 URL 패턴을, component prop에는 해당 URL에서 보여줄 컴포넌트를 지정합니다.

React Router v5에서는 Switch 컴포넌트를 사용하여 여러 Route 중에서 매칭되는 첫 번째 Route만을 렌더링하게 할 수 있습니다. 반면, v6에서는 Routes 컴포넌트를 사용하여 동일한 기능을 구현합니다.

다음은 React Router를 사용하는 간단한 예제입니다:

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

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

export default App;

위의 예제에서는 / 경로에 접속하면 Home 컴포넌트가, /about 경로에 접속하면 About 컴포넌트가 보여집니다. 이렇게 React Router를 사용하면, 사용자가 URL을 변경하더라도 페이지를 새로 로딩하지 않고도 새로운 컴포넌트를 보여줄 수 있습니다.