React SPA
기존에는 MPA(Multi Page Application) 방식으로 페이지마다 새로운 HTML 전체를 받아와 화면에 보여줬었다.
서버가 HTML을 만들어서 브라우저에게 전달해준다. 브라우저는 그냥 읽기만 해서 보여주는 방식이었다. 즉, URL에 들어갈때마다 HTML 바뀌기 때문에 브라우저가 새로운 페이지 전체를 그렸다. 그래서 다른 페이지를 이동할 때마다 깜빡거린다.
React SPA는 다른 페이지로 이동할 때 중복되는 부분은 안 바뀌고 바꾸고 싶은 부분만 바꿀 수 있다.
단점
- 로딩시간이 길다.
- React의 기본적인 HTML에는 거의 비어있다.
- 기본적인 HTML파일에 js로 엘리먼트들을 붙인다.
- 반대로 js파일이 많아져서 js파일이 무거워졌다.
- 그래서 JS 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
- 검색 엔진 최적화가 좋지 않다.
- 검색 엔진은 HTML 문서 내의 각종 태그나 링크들을 분석한다.
- 하지만 SPA는 HTML이 거의 비어있다보니 검색 엔진이 충분한 자료를 수집하지 못한다.
React Router
화면에 따라 주소가 달라진다. 다른 주소에 따라 다른 뷰를 보여주는 과정을 경로에 따라 변경하는 의미로 라우팅(Routing)이라고 한다. React 자체에는 이 기능이 내장되어 있지 않아서 라이브러리를 다운 받아서 사용해야 한다. React Router라는 라이브러리를 가장 많이 사용한다.
주요 컴포넌트
BrowserRouter
HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다. <BrowserRoute>가 상위에 작성되어 있어야 React Route 컴포넌트들을 사용할 수 있다.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
); 보통은 App을 감싸서 최상위로 올려서 쓰는 편이다.
Routes, Route (route matcher)
<Routes>는 여러<Route>감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 해주는 역할. 경로를 매칭해주는 컴포넌트.<Route>컴포넌트는 Path 속성으로 해당 path에서 무슨 컴포넌트를 보여줄지 정한다.<Link>컴포넌트와 일치하는 경로만 보여준다는 의미.<Routes>는<Route>로 생성된 자식 컴포넌트 중 매칭되는 첫번째 Route를 렌더링하는 역할
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>path="*"은 지정된 주소이외의 주소로 접근하게되면 여기에 설정된 컴포넌트를 보여준다.
Link
<Link> 경로로 이동하는 데 사용. 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해준다.
<Route>는 URL을 보고 일치하는 컴포넌트를 렌더한다.
<Link to="/">Home<Link />
<Link to="/about">About<Link />
<Link to="/mypage">MyPage<Link />마지막으로
신기하다. 페이지가 변경되는데 중복되는건 가만히 놔둘 수 있고 바꿀 부분만 컴포넌트 형식으로 불러오는것이 부드럽다고 생각했다.
