[리액트 11] 리액트 라우터

안녕하세요! React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하는 데 사용되는 표준 라이브러리입니다. React Router를 사용하면 URL에 따라 다양한 뷰(views) 또는 컴포넌트를 표시할 수 있으며, 페이지를 새로고침하지 않고도 애플리케이션 내에서의 네비게이션을 관리할 수 있습니다.

React Router의 주요 개념들:

1. BrowserRouter: HTML5의 history API를 사용하여 URL을 조작하고, 현재 위치를 애플리케이션의 UI와 동기화합니다.

2. Route: URL과 React 컴포넌트를 연결합니다. 특정 URL에 대해 어떤 컴포넌트를 렌더링할지 정의합니다.

3. Link (또는 NavLink): 애플리케이션 내에서 다른 경로로의 링크를 만듭니다. <a> 태그와 유사하지만, 페이지를 새로고침하지 않고 라우팅을 수행합니다.

4. Switch (v5 이하) / Routes (v6 이상): 여러 <Route> 컴포넌트 중에서 현재 URL과 일치하는 단 하나의 라우트만 렌더링합니다.

기본적인 사용 방법:

React Router v6를 예로 들어 설명하겠습니다.

1. 설치:

   npm install react-router-dom  

2. 라우터 설정:

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

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

3. 링크 생성:

   // Navigation.js  
   import { Link } from 'react-router-dom';  

   function Navigation() {  
     return (  
       <nav>  
         <Link to="/">Home</Link>  
         <Link to="/about">About</Link>  
         <Link to="/contact">Contact</Link>  
       </nav>  
     );  
   }  

4. 컴포넌트 구현:
각 경로에 대한 컴포넌트를 구현합니다 (예: Home, About, Contact).

주의사항:

1. React Router v6부터는 <Switch>가 <Routes>로 변경되었으며, 각 <Route>에는 element prop을 사용하여 렌더링할 컴포넌트를 전달해야 합니다.
2. exact prop은 v6에서 더 이상 필요하지 않습니다. v6에서는 모든 경로가 정확히 일치해야 라우팅됩니다.
3. React Router는 동적 라우팅, 중첩된 라우트, 리다이렉트 등 고급 라우팅 기능도 제공합니다.

React Router를 사용하면 React 애플리케이션에서 사용자 경험을 향상시키고, 웹 애플리케이션의 네비게이션을 효과적으로 관리할 수 있습니다.