React Router

React에서 사용할 수 있는 써드 파티 라이브러리이다. 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해 준다.

Routing?

쉽게 말하자면 사용자가 요청한 URL에 따라 각각 맞는 페이지를 보여주는 작업이다.

a태그와 차이점??

• a태그 사용시 페이지 전체가 배 호출 된다.
  => 화면 깜빡임이 발생, 더 부드러운 화면 전환을 위해 라우팅을 사용한다.

설치하기

1. vsc의 터미널에 npm create vite@latest (파일명) 입력하여 파일을 만들어 준다.

2. install react-router-dom --save 를 입력한다.

3. main.jsx에 들어가 < BrowserRouter > 태그로 라우터 돔을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸준다.

   ❓BrowserRouter
   HTML5의 History API를 사용하여 URL과 UI를 동기해주는 < Router >이다. 이는 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해주고, 현재 주소에 관련된 정보를
   props로 조회 및 사용이 가능하도록 한다.

   ---

• < Routes > 컴포넌트는 < Route >를 감싸서 그 중에서 해당되는 Route를 랜더링 해주는 역할을 한다.

• < Route > 컴포넌트는 URL 경로에 맞춰 보여줄 컴포넌트를 지정할 경우 사용한다.
  
  

  <Route path="경로" element={보여 줄 컴포넌트} />

  ---

  React Router 기본 예제

  import {Route, Routes} from 'react-router-dom'
  import Home from './components/Home'
  import Intro from './components/Intro'
  import Page1 from './components/Page1'
  import Page2 from './components/Page2'
  import Page3 from './components/Page3'
  import './App.css'
  function App() {
  
  return (
     <div>
       <Routes>
         
         <Route path={'/'} element={<Intro/>}>
           <Route index element={<Home/>}/>
           <Route path={'page1'} element={<Page1/>}/>
           <Route path={'page2'} element={<Page2/>}/>
           <Route path={'page3'} element={<Page3/>}/>
           <Route path={'*'} element={<h4>잘못된 페이지 호출입니다</h4>}/>
         </Route>
  
       </Routes>
     </div>
   )
  }
  export default App
  

• 경로가 맞지 않을 경우 path={“*”} 같은 형식을 줘 디폴트 페이지를 줄 수도 있다.
• 시작할 시 기본 페이지를 넣고 싶다면 path={“/”}를 활용할 수 있다