React SPA
전통적 웹사이트는 사용자가 페이지 이동시, 페이지 전체를 불러왔다.
그래서 등장한 SPA 페이지 전환시, 필요한 부분만 새로 불러온다.
SPA장점
- SPA는, 사용자와 서비스 간 많은 상호작용 도와준다.
- 기존 사이트는, 중복되는 부분까지 불러오는 것이 서버의 불필요한 트래픽을 증가시킨다.
- SPA를 통해 사용자는 빠른 반응성으로 질 좋은 사용자 경험을 얻을 수 있다.
SPA는 화면을 전환을 할 때, 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식의 웹사이트를 말한다.
다른말로는, 페이지 전체를 렌더링하는 것이 아니라, 필요한 부분만 업데이트해서 사용자 행동에 빠르게 반응한다.
SPA의 단점은
브라우저는 첫 화면 로딩시에 HTML파일을 읽어들인 후 그 안의 script요안에 있는 javascript 파일을 다시 받아온다. 이때 첫 화면 로딩시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 Javascript 파일 안에 들어있고 javascript 파일이 무겁다.
1)때문에 이 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.
2)검색엔진 최적화가 안좋다.
검색엔진 최적화란?
구글이나 네이버 같은 검색엔진이 자료를 수집하게 좋도록 웹 페이지를 구성하는 것을 뜻한다.
검색엔진 작동방식은?
검색 로봇이 웹페이지에 있는 정보를 수집하고 분석해서 그 결괏값에 인덱스를 만들어 보관하고 있는데, 이때 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 가장 검색어와 관련이 높은 웹 페이지 순대로 보여주는 방식이다.
검색로봇이 자료를 수집할 때 웹페이지의 url은 물론, html 문서 내 각종 태그나 링크를 분석한다.
SPA는 HTML이 거의 비어있다보니, 검색 로봇이 자료 수집할 때 충분히 가져가지 못한다.
하지만 SPA도 이 검색 엔진 최적화에 대한 부분에서 많이 발전하고 있는 추세다.
React Router
컴포넌트가 UI 필수 요소란 정의, 각자 고유의 기능을 가지고 있단 정의를 가지고 있다.
하지만 더 고차원적인 React 개발자가 되려면, 애플리케이션 안에서 다뤄지고 있는 데이터를 컴포넌트끼리 보다 유기적으로 주고받을 수 있도록 설계해야 한다.
컴포넌트를 활용할 수 있는 방법이 React Router다!!
React Router를 이용해 React SPA 개발 방법을 배워보자
SPA는 하나의 페이지를 가지고 있지만, 한종류의 화면만 사용하지 않는다.
예를 들어, 트위터와 같은 SPA를 만들 때, 메인 트웻 페이지, 알림페이지, 마이페이지 화면이 필요하다.
이 화면에 따라 '주소'가 달라진다.
이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 '경로에 따라 변경한다'라는 의미로 '라우팅'이라고 한다.
그래서 React SPA에서는 라우팅을 위해 React Router 라이브러리를 가장 많이 사용한다.
-
리액트 프로젝트 환경 만드는 방법
터미널에다가 npx create-react-app simpleroute(폴더명) 친다. -
리액트 라우터 라이브러리 설치 하는 방법
vscode 터미널에서 npm install react-router-dom@^6.3.0 을 친다.
-
필요한 모듈을 불러온다. (React Router 주요 컴포넌트 꺼내오기)
import {BrowserRouter, Routes, Route, Link} from "react-router-dom" -
BrowserRouter는 router !
Routes, Route는 route matcher !
Link는 route changers !
이 모든 것을 코드로 정리해보자면
function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
</li>
<li>
<Link to="/mypage">MyPage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
<Route path="/mypage" element={<MyPage />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function MyPage() {
return <h1>MyPage</h1>;
}
function Dashboard() {
return <h1>Dashboard</h1>;
}
export default App;