• 리액트 라우터 (React Router)

  • 리액트 라우터는 리액트 애플리케이션에서 페이지 간 이동을 관리하는 라이브러리 이다. 리액트는 기본적으로 단일 페이지 애플리케이션 구조로 동작하기 때문에, 페이지 내에서의 URL 변경을 브라우저의 기본 방식으로 처리하는 대신, 리액트 라우터를 사용해 URL을 제어한다. 리액트 라우터를 사용하면 애플리케이션 내에서 페이지 이동을 쉽게 할 수 있다.

  출처: https://itconquest.tistory.com/entry/ReactJS-React-Router-Dom-설치-및-사용하기

  import React from 'react';
  import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
  
  function Home() {
    return <h2>Home Page</h2>;
  }
  
  function About() {
    return <h2>About Page</h2>;
  }
  
  function App() {
    return (
      <Router>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>
        
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Router>
    );
  }
  
  export default App;
  

  ---

  Router 주요 기능과 특징

  • URL 경로 매핑
    • URL 을 특정 컴포넌트와 연결하여, URL이 변경되면 해당 컴포넌트를 랜더링한다. 예를 들어 /home 경로가 요청되면 Home 컴포넌트가 랜더링 된다.

  import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
  import Home from "./pages/Home";
  import About from "./pages/About";
  
  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />   {/* /home 경로에서 Home 컴포넌트 렌더링 */}
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    );
  }
  
  export default App;
  

• 동적 라우팅

  • URL 경로에 따라 컴포넌트를 동적으로 렌더링할 수 있다. 예를 들어 /user/:id 처럼 동적 파라미터를 사용하면 특정 id에 따라 다른 페이지를 렌더링할 수 있다.

import { useParams } from "react-router-dom";

function UserProfile() {
  const { id } = useParams();  // URL에서 id 값을 가져옴

  return <h2>사용자 ID: {id}</h2>;
}

<Routes>
  <Route path="/user/:id" element={<UserProfile />} />
</Routes>

• 중첩 라우팅
  • 하나의 컴포넌트 내에서 또 다른 라우터를 사용하여 중첩된 경로를 정의할 수 있다. 아래의 예시는 /dashboard/analytics로 이동하면 Dashboard 컴포넌트 안에서 Analytics 컴포넌트가 렌더링 되는 예시이다.

import { Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h2>대시보드</h2>
      <Outlet />  {/* 중첩 라우팅된 컴포넌트가 여기에 렌더링됨 */}
    </div>
  );
}<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="analytics" element={<Analytics />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

• 리디렉션
  • 특정 조건에 따라 다른 경로로 리디렉션할 수 있다. 예를 들어 로그인되지 않은 사용자가 특정 페이지에 접근하려고 할 때, 로그인 페이지로 리디렌션할 수 있다. 아래의 예씨는 로그인이 안 되어 있어면 /profile 경로로 가도 /login 으로 리디렉션 되는 코드이다.

import { Navigate } from "react-router-dom";

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

<Routes>
  <Route path="/profile" element={<ProtectedRoute isAuthenticated={user} ><Profile /></ProtectedRoute>} />
  <Route path="/login" element={<Login />} />
</Routes>

✅ 이후 확장할 수 있는 항목

• ✅ 페이지 추가 시 /pages/에 파일만 넣고 라우터 추가
• ✅ 팝업도 모듈화 (components/common/Modal.jsx)
• ✅ 페이지별 scss도 따로 관리 가능
• ✅ 추후 i18n, darkmode, lazy loading 등도 확장 쉬움