[React] Route 컴포넌트

1. Routing이란?

• 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것을 의미한다.
• 리액트는 프레임워크가 아닌 라이브러리이므로 라우팅을 하기 위해서는 npm react-router-dom 명령어로 필요한 라이브러리를 다운받아야 한다.

2. Router 컴포넌트를 만드는 이유

/src/index.js에서 렌더링을 할때마다 root.render()의 컴포넌트명을 바꿔주어야하는 불편함이 발생
-> 경로관리를 편리하기위해 Router.js만들기

3. Router 컴포넌트 구성

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";
import Nav from "./pages/Main/Nav";
import Footer from "./pages/Main/Footer";

const Router = () => {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};

export default Router;

• BrowserRouter : 주소변경의 편의성을 제공하는 역할, 새로고침 하지 않아도 주소변경가능
• Routes : 여러 라우트 컴포넌트를 감싸는 역할, 라우트에 지정된 경로와 브라우저 주소창 url과 맞는다면 컴포넌트를 브라우저에 그림
  (routes밖에 있으면 경로에 영향을 받지 않아 브라우저에 항상 그려진다.)
• Route : 렌더링 할 컴포넌트와 경로를 지정하는 역할
  - path : 경로 설정
  (path="/" 로 지정하면 http://localhost:3000 에 진입했을 때 해당 컴포넌트가 실행된다.)
  - element : path경로로 이동했을 때 보여줄 컴포넌트