[오늘의 React] Router

https://reactrouter.com/en/main/start/overview

 

 

SPA(Single Page Application)라고 부르는 이유 ->

처음 접속했을때 구체적인 data를 제외한 정적 파일을 모두 불러오기 때문

​

리액트 라우터로 페이지를 나눠 접속하는 url마다 다른 data를 보여줄 수 있음

페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줌

새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태

​

CSR(Client Side Rendering)

최초 한 번 HTML, static, js 등을 다 받아와서 로딩하는 방식

이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 클라이언트가 해석 후 렌더링

​

클라이언트 요청=> 변화가 필요한 영역만 서버에 전달=> 서버에서 클라이언트로 리소스 전달=> 클라이언트에서 view 처리

​

SPA(Single Page App) 형식의 프론트엔드 라이브러리(React, Vue)의 방식

​

(React SSR 라이브러리=Next.js, Vue SSR 라이브러리=Nuxt.js)

처음에 HTML에 대한 정보 비어 있음

​

​

https://reactrouter.com/en/6.6.2/start/tutorial

 

npm i react-router-dom 
혹은
yarn add react-router-dom

 

BrowserRouter: HTML5를 지원하는 브라우저 주소 기준

HashRouter: 해시 주소 기준

​

index.js

import { BrowserRouter } from "react-router-dom";
<BrowserRouter>
    <App />
 </BrowserRouter>

import {  BrowserRouter ,  Routes,  Route,  Link  } from "react-router-dom";
<Route path="경로" element={ <보여주고싶은 컴포넌트 /> }>

 

Route : 어떤 경로로 들어왔을 때 어떤 컴포넌트를 보여주겠다 (보이는 영역 설정)

<Routes>
<Route path="/aaa" element={<Aaa />} />
<Route path="bbb" element={<Bbb />} />
</Routes>

<Link to="/">홈</Link>
<Link to="/path주소">소개</Link>
<Link to="about">소개</Link>

Link to =

Router 주소 변경 컴포넌트

브라우저에서 렌더링 된 결과는 <a href="">

​

NavLink to =

특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트

Link to와 같은 기능

style 또는 className을 설정할 때 { isActive: boolean } 을 매개변수로 전달 받는 함수 타입의 값을 전달

---

useParams

https://reactrouter.com/en/6.6.2/hooks/use-params

Dynamic URL

사용자정의 변수를 만들어 이동하고 해당 링크를 가진 자식 컴포넌트에 사용자정의 변수를 이용해 정보 받음

<Route path="front/:사용자정의변수" element={ <Front /> } />

const { 사용자정의변수 }  = useParams()

 

---

index

path="/"와 동일한 의미

좀 더 명시적으로 표현하는 방법

---

useNavigate 함수

navigate('/')로 이용