[React.js] 라우터

 

라우터는 사실 react뿐만 아니라 자바스크립트 기반 프레임워크에 다 공통된 내용이다

 

react는 SPA기반 → 싱글 html로 구성 

 

그전에는 대부분 MPA 기반이라

페이지마자 html이 따로 존재하였다

 

실제로 내가 만들어본 페이지도 메인페이지 html

서브페이지 html 다 따로 만들어서 진행했는데

 

이 방식은 페이지 이동이 굉장히 느리고 파일도 되게 무거워진다

 

그러나 SPA는 html은 하나고 jsx를 여러개로 만들어 구조 html 은 하나로 두고

안에 있는 내용만 jsx로 바꾸면 되서 페이지 이동이 빠르고 실제로 페이지는 재시작 되지 않는다

 

관련 jsx에 접근할 수 있게 만들어주는 역할이 라우터이다!

 

 

라우터 라이브러리는 터미널에서 npm i react-router-dom 쳐주면 깔린다

번외로 vue에서 라우터는 프로젝트 만들 때 설정 가능

 

 

 

하고 

main.jsx에

import { BrowserRouter } from "react-router-dom";

 

추가

  <BrowserRouter>

    <App />

  </BrowserRouter>

 

App을 감싸면 라우터 기능 쓸 수 있게 된다

 

이를 개발자 도구에서도 확인 가능한데

 

사진을 보면 App을 다 Router가 감싸고 있는게 확인 가능

 

 

그리고 App.jsx가서

import { Route, Routes } from "react-router-dom";

 

해주고

 

function App() {

  return (

    <Routes>

      <Route path="/" element={<컴포넌트명/>} />

      <Route path="/패스명" element={< 컴포넌트명  />} />

      <Route path="/패스명" element={< 컴포넌트명  />} />

    </Routes>

  );

}

 

해주면 끝