리액트 라우터 기본 사용법

리액트 라우터는 다양한 경로의 페이지로 이동할때 사용하는 패키지이다.

기존의 페이지 변환 방식은 a 태그를 이용하는 것이었다.

<nav>
  <ul>
    <li>
      <a href="index.html">홈</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
  </ul>
</nav>

하지만 이런 방식을 활용한다면

1. 페이지가 늘어나는 만큼 html 정적 파일도 늘어난다.
2. 중복되는 UI 에 대해서 재사용이 불가하다.
3. 페이지 이동시마다 랜더링 비용이 발생한다.
4. 전통적인 SSR 방식으로 커버가 가능하지만 서버코드와 UI 코드가 분리되지않는다.
5. 유지보수와 가독성이 좋지않다
6. 서버에서 그려줄경우 사용자가 실제 화면을 보기까지 지연 로딩이 발생한다.

같은 문제점들이 발생한다.

그래서 이런 문제점들을 해결하고자 탄생한게 리액트였지만, 리액트는 ui 라이브러리이기때문에 페이지 전환을 하기 위한 라우터는 따로 router 패키지를 다운 받아주어야한다.

npm install react-router-dom@6

- react-router 과 react-router-dom의 차이점은?

react-router-dom은 react-router에 dom이 바인딩되어있다고 생각하면 된다.
웹 개발자는 react-router-dom을, 앱 개발자는 react-router-native를 설치하면 되고
react-router를 브라우저에서 쓰기 위한 상위 집합 라이브러리가 react-router-dom이다.

🔍 React-Router 사용법

1. index.js에서 BrowserRouter 불러와서 App 컴포넌트 감싸기

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BrowserRouter><App /></BrowserRouter>);

2. Routes, Route 불러오기

import { Route, Routes } from "react-router-dom";
import Welcome from "./components/Welcome";
import Products from "./components/Products";

function App() {
  return (
    <div>
      <Routes> // 여러개의 라우트들이 있을경우 감싸줘서 매칭시켜주는 역할
        <Route path="welcome" element ={<Welcome />}> // 도메인.com/welcome으로 접속하면 
                                                      // Welcome 컴포넌트 내용들을 보여주겠다.
        </Route>
        <Route path="products" element ={<Products />}>
        </Route>
      </Routes>
    </div>
  );
}

export default App;

이제 주소창에 /welcome을 입력하면 Welcome 컴포넌트를, /products를 입력하면 Products 컴포넌트를 띄어준다.