- SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.
- SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
- 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다.
- React에서 npm으로 React Router를 설치(
npm install react-router-dom@6.3.0)하고 이용할 수 있다.- React Router를 이용하여 SPA를 구현할 수 있다.
- 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.
🏀React SPA
🏅 SPA(Single Page Application)
서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트
🏅 SPA의 등장배경
-
전통적인 웹사이트는 한 웹사이트 내에서 다른 페이지로 이동하면 브라우저는 바뀐 내용을 보여주기 위해 매번 HTML을 통째로 불러와야 했다. (이런 행위를 '깜빡인다'라고 말한다)
하지만, SPA는 변하는 요소만 리로딩하기때문에 중복되는 부분은 다시 로딩되지 않는다.웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다.
수많은 상호작용(페이지를 이동한다던지, 어떤 버튼을 클릭해서 새로고침이 발생한다던지)이 일어나는 가운데, 매번 페이지전체가 새로고침되면, 얼마나 답답할까?
예를 들면, 인스타에서 좋아요를 누르면 전체 화면이 한번 깜빡이며 리로딩되는 것... 불편하다!이때문에 사용자는 느린 반응성을 갖게 되었고, 이는 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었다. 사용자 뿐 아니라 서버와의 불필요한 트래픽 역시 발생 시켰다.
-
1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작
-
2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화되었으며, 이것이 바로 싱글 페이지 애플리케이션, 즉 SPA!!
🏅 SPA의 장점
-
전체 페이지가 아닌, 화면 업데이트에 필요한 부분의 데이터만 받아서업데이트 하기때문에 사용자와의 상호작용(interaction)에 빠르게 반응
-
서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저히 줄어듬
-
전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공 가능
🏅 SPA의 단점
-
브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거치는데, SPA의 경우에는 JavsScript의 파일 크기가 크다보니 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
-
검색 엔진 최적화(SEO; 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것)가 좋지 않다.
검색 로봇은 자료를 수집할 때에 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석해서 인덱스에 보관해 두다가 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 가장 연관성이높은 웹페이지들을 순서대로 보여주는데,
SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다.
즉, 자바스크립트 의존적이라고 볼 수 있다.
🏀React Router
SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하는 것은 아니다.
SNS를 예로 들면, 타임라인, 게시글 상세페이지, 알림페이지, 마이페이지 등 여러 화면이 필요하다.
이 화면들은 각각 고유한 URL을 가지고 있고, 이 URL, 즉 주소에 따라 다른 뷰를 보여주게 되는 것. 이 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다.
BUT!
React 자체에 이 기능이 내장되어 있지 않다. 우리가 직접 주소마다 다른 뷰를 보여줘야 한다.
HOW?
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용!
🏅 React Router 활용
다운은 npm으로 가능. npm install react-router-dom@6.3.0
React Router의 주요 컴포넌트는 크게 다음 3가지로 나눌 수 있다.
1. 라우터(router)의 역할을 하는<BroserRouter>
2. 경로를 매칭(route matchers)해주는<Routes>와<Route>
3. 경로를 변경(route changers)하는 역할의<Link>
import {BroserRouter, Routesm Route, Link} from "react-router-dom";
와 같이 필요한 해당 모듈들을 import로 불러와 사용한다.
⬇️ 위 3가지 컴포넌트에 대해 더 자세하게 사용법을 알아보자!! ⬇️
🏅 BrowserRouter
-
<BrowserRouter>컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다. -
<BrowserRouter>가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.
function App () {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
Home
</li>
// 생략...- ReactDOM의 렌더 단계인 index.js 에 넣어서 활용할 수도 있다.
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>
); 🏅 Routes, Route
-
<Routes>컴포넌트: 여러<Route>컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할.<Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다. -
<Route>컴포넌트: path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정한다.<Link>컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
path로 작성하는 경로와 컴포넌트 이름이 동일해야 헷갈리지 않는다!
팁 : 만약 사용자가 지정된 주소인 “/’, “/mypage”, “/dashboard” 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있다. 이럴 때 사용할 수 있는 속성이
path=”*”지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 된다.
🏅 Link
경로를 연결해 주는 역할을 하는 컴포넌트.
페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 준다
-
ReactDOM으로 렌더하면
<Link>컴포넌트는<a>태그로 바뀐다.- React Router에서
<a>요소가 아닌<Link>를 사용하는 이유는,<a>요소가 페이지를 전환하는 과정에서 페이지를 불러오기 때문에! 이 때문에, 다시 처음부터 렌더링을 시켜 새로고침 현상이 일어나게 된다.
하지만<Link>컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.
- React Router에서
function App() { return ( <BrowserRouter> <div> <nav> <ul> <li> {/* Link 컴포넌트를 이용하여 경로를 연결 */} <Link to="/">Home</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;
