SPA(single Page Application)
SPA: 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS와 CSS같은 모든 자산을 로드하는 애플리케이션이다.
페이지 또는 후속 페이지의 상호작용은
서버로부터 새로운 페이지를 불러오지 않으므로페이지가 다시 로드되지 않는다.
전통적인 웹 애플리케이션 단점
- 서버의 부담이 크다.
- 속도가 느려질 수 있다.
- 페이지 이동 시, 깜빡임이 발생
=> 첫 페이지 요청 시에만 서버에서 HTML을 내려주고,
이후에 routing은 url을 이동하더라도 새로운 HTML을 서버에서 받지 말고 화면을 Client에서 그리자!!(Client Side Rendering)
React는 CSR 방식으로 동작하고, SPA를 만들 수 있도록 지원하는 라이브러리이다.
Client Side Rendering이란?
React Router
여러 화면으로 구성된 웹 어플리케이션을 만드는 데 사용되고 있다. 이는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해주며, 서버 사이드 렌더링을 도와주는 도구들도 함께 딸려온다. 추가적으로 react-native에서도 사용가능하다.
React Router에 나오는 새로운 요소들
-BrowserRouter : HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기해주는 <Router>이다.
페이지를 새로고침하지 않아도 주소를 변경할 수 있게 해주고, 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하다.
-Routes : 여러개의 Route를 포함하는 요소
-Route : path에 따라 해당 UI를 보여주는 라우팅 기능을 가진 component.
기본 형식
<Route path={"/"} element={<MainPage />} />path는 URL 경로를, element는 경로에 들어가면 나타내주는 요소들을 말한다.
-Oulet : 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 <Outlet>을 사용해야 한다. 이를 통해 하위 경로가 렌더링될 때 중첩된 UI가 표시된다.
-Link
기본 형식
<Link to="/blog">Blog</Link>to를 사용해 기존 주소에 /blog를 추가해 접근할 수 있게 해준다.
if) Link가 아닌 a태그, href를 이용하면 새로운 html을 받아오면서 잠깐 깜박인다.
-useParams() : Router 사용 시 파라미터 정보를 가져와 활용하도록
useParams import
import { useParams } from 'react-router-dom';
useParams 정보를 하나의 변수에 저장
const params = useParams();
-useNavigate() : 양식이 제출되거나 특정 event가 발생할 때, URL을 조작할 수 있는 interface를 제공
useNavigate import
import { useNavigate } from 'react-router-dom';
useNavigate 정보를 하나의 변수에 저장
const navigate = useNavigate();
아래와 같이 사용이 가능하다.
<h5
onClick={() => navigate("/")}
style={{ cursor: "pointer" }}
>
logo
</h5>