[React] React Router 설정방법

리액트 라우터(React Router)란?

리액트 라우터(React Router)는 리액트 애플리케이션에서 주소(URL)에 따라 컴포넌트를 다르게 렌더링할 수 있도록 해주는 라이브러리입니다.
즉, 사용자가 브라우저 주소창에 입력한 URL을 감지해서, 해당 경로에 맞는 화면(컴포넌트)을 보여주는 역할을 합니다.
이 기능을 통해 리액트 SPA(Single Page Application)에서도 여러 페이지가 있는 것처럼 자연스러운 내비게이션과 화면 전환을 구현할 수 있습니다.

주요 컴포넌트

• BrowserRouter
  라우터 기능을 사용하려면 앱의 최상위에 <BrowserRouter>로 감싸야 합니다. 이 컴포넌트가 하위 트리에 라우팅 정보를 전달합니다.
• Routes & Route
  <Routes>는 여러 개의 <Route>를 감싸서 관리합니다.
  <Route>는 path 속성에 해당하는 주소로 접근했을 때 어떤 컴포넌트를 보여줄지 정의합니다.
• Link
  내비게이션을 위해 <Link to="/경로"> 컴포넌트를 사용하면, 페이지 새로고침 없이 경로를 바꿔줍니다.

---

예시 코드

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Main';
import Detail from './pages/Detail';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Main Page</Link>
        <Link to="/Detail">Detail Page</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Detail" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}

위 예시처럼, 주소가 '/'이면 Main 컴포넌트, '/Detail'이면 Detail 컴포넌트가 보여집니다.

 

---

리액트 라우터 돔 설치 방법

npm install react-router-dom

 

기본 사용법

1. BrowserRouter로 앱 전체를 감싸기

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App";
   import { BrowserRouter } from "react-router-dom";
   
   ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </React.StrictMode>
   );
       

2. Routes와 Route로 경로와 컴포넌트 연결

   import { Routes, Route, Link } from "react-router-dom";
   import Home from "./pages/Home";
   import Detail from "./pages/Detail";
   
   function App() {
     return (
       <div>
         <nav>
           <Link to="/">Main</Link>
           <Link to="/Detail">Detail</Link>
         </nav>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/Detail" element={<Detail />} />
         </Routes>
       </div>
     );
   }
       

   • <Link to="경로"> : 버튼/메뉴 등으로 표현 가능하며 클릭 시, 주소를 해당 경로로 바꿔줍니다.
   • <Routes> : 여러 개의 Route를 묶어줍니다.
   • <Route path="경로" element={컴포넌트} /> : 해당 경로에 컴포넌트를 보여줍니다.
3. 각 컴포넌트의 코드 예시

   // pages/Main.tsx
   const Main = () => {
     return <div>Main Page</div>;
   };
   export default Main;
   
   // pages/Detail.tsx
   const Detail = () => {
     return <div>Detail Page</div>;
   };
   export default Detail;
       

실제 작동 원리

• 링크를 클릭하면 브라우저의 주소가 바뀌고, 그에 맞는 이름의 컴포넌트가 나타납니다.
• 화면이 리렌더링 없이 빠르게 전환됩니다.
• 링크를 클릭하지 않아도 올바른 경로를 주소창에 입력하면 해당 컴포넌트가 나타납니다.

---

정리

• 리액트 라우터는 SPA에서 URL에 따라 컴포넌트를 다르게 보여주는 라이브러리입니다.
• BrowserRouter, Routes, Route, Link 등 다양한 컴포넌트로 라우팅을 손쉽게 구현할 수 있습니다.
• 중첩, 동적, 보호 라우트 등 다양한 고급 기능도 지원합니다.
• 리액트 라우터를 사용하면, 리액트 앱에서 여러 페이지가 있는 것처럼 자연스럽고 효율적인 내비게이션을 구현할 수 있습니다.