[React] React Router

React Router

리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리

리액트의 경우 경로가 바뀌었을 때 전체 페이지를 새로고침하지 않고 필요한 컴포넌트만 교체해서 렌더링을 한다. 이걸 SPA(Single Page Application)라고 한다.
react Router에는 크게 Router / Routes / Route / Link 4가지의 구성 요소가 있다.

---

SPA(Single Page Application)란?

하나의 HTML 문서 안에서 자바스크립트로 여러 페이지를 보여주는 방식으로 여러 경로의 HTML 문서를 돌아다니는 게 아닌 자바스크립트가 화면 일부만 동적으로 변경한다.
👉 페이지 이동처럼 보이지만 실제로는 컴포넌트 교체만 일어난 것이다.

---

React Router 구성요소

1️⃣ Router

react Router에서 사용하는 데이터들을 모두 가지고 있는 것

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

<BrowserRouter>
  <App />
</BrowserRouter>
  

리액트 라우터를 사용하려면 반드시 Router라는 컴포넌트가 필요하다. 최상위 컴포넌트에서 Router를 감싸면 프로젝트 전체에서 라우터를 사용할 수 있다.

2️⃣Routes와 Route

페이지의 경로랑 컴포넌트 지정

• Routes : 여러 Route를 감싸는 컨테이너
• Route : 경로와 컴포넌트를 매칭

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  ...
</Routes>

Routes 안에서는 위에서부터 차례대로 Route를 검사해서 현재 경로와 일치하는 path prop의 Route를 찾아 해당 컴포넌트를 렌더링 해준다.

Route prop 종류

• path : 경로를 지정
• element : 보여줄 컴포넌트를 지정

3️⃣ Link

react Router에서 태그 대신 사용하는 것

<Link to="/"> 홈페이지 </Link>
<Link to="/about"> 상세정보 </Link>

to prop을 이용하여 이동경로를 지정해준다.
a태그처럼 페이지 이동 기능을 하지만 새로고침 없이 이동할 수 있다.