SPA(Single Page Application)
- 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저하의 문제를 야기하기 때문에 이를 해결하기 위한것이 SPA이다.
- 중복되는 요소를 매번 불러와 불필요한 트래픽 야기
웹사이트가 복잡해지고 Application의 형태를 가지게 되며, Header, Navigation Bar와 같이 중복되는 요소들을 매번 불러와 불필요한 트래픽을 발생되어 개발이 되었다. - HTML 문서 전체가 아니라 업데이트에 필요한 데이터만 받아, JavaScript가 이 데이터를 조작하여 HTML요소를 생성하여 와면에 보여주는 방식
결론
필요한 데이터만 받아와서 업데이트하는 방식으로 작동하는 웹 Application, 웹사이트를 말한다.
장점
- 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하기 때문에 사용자와의 interaction(상호작용)에 빠르게 반응한다.
- 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버의 과부하 문제가 줄어든다.
- 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.
- 사례
Youtube, Facebook, Gmail, airbnb, Netflix
단점
- JavaScript파일의 크기가 크다.
JS파일을 기다리는 시간으로 인해 첫 로딩 화면이 길어진다. - 검색 엔진 최적화가 좋지 않다.
HTML파일은 별다른 자료가 없기 때문에 검색엔진이 적절히 동작하지 못한다.
React-router
- 메인 화면 페이지와 다른 서브 페이지들은 서로 다른 주소를 가지고 있다. 이 처럼
서로 다른 주소에 따라 다른 뷰를 보여주는 과정(경로에 따라 변경)하는 것을 라우팅(Routing) 이라고 한다.
React-router의 모듈 & 주요 컴포넌트
- React-Router의 묘듈 불러오기
import{BrowserRouter, Routes, Route, Link} from 'react-router-dom'- 주요 컴포넌트
| router | route matchers | route changers |
|---|---|---|
<BrowserRouter> | <Routes> <Route> | <Link> |
BrowserRouter
- BrowserRouter컴포넌트는 웹 Application에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
- 상위에 작성되어야만 React Router의 컴포넌트들을 사용할 수 있다.
Route, Routes
- Routes 컴포넌트는 여러 Route 컴포넌트를 감싸, 그 중 경로가 일치하는 하나의 라우터만 렌더링 시켜준다. 만일 Routes를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
- Route 컴포넌트는
path ='경로'속성을 지정해서 어떤 컴포넌트를 보여줄지 정하고, Link 컴포넌트가 정해주는 URL경로와 일치하는 경우 보여주게 된다.element = {<원하는 컴포넌트, />}속성을 통해 연결하고자 하는 컴포넌트를 넣어준다.Link
- 경로를 연결해 주는 역할을 하는 컴포넌트
(페이지 전환을 통해 페이지를 새로 불러오지 않고 Application을 그대로 유지하여 HTML5 History API를 이요해 페이지의 주소만 변경해준다.- ReactDOM으로 렌더를 시키데 되면 Link컴포넌트는 a요소로 바뀌는 모습을 볼 수가 있다.
to ='경로'속성을 사용하여 Route 컴포넌트에 설정해 준pate주소로 연결해준다.
- React Router에서
<a>요소가 아닌<Link>를 사용하는 이유가 있나요?
<a>요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어나게 되죠.
하지만<Link>컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있습니다.
React-router 라이브러리 설치
npx create-react-app react_practice # react_practice디렉토리에 React App 설치
cd react_practice # react_practice에 이동
npm install react-router-dom@^6.3.0 # react-router 라이브러리 설치React-router 예시
- /src/index.js (React Version 18)
최상위 컴포넌트에 BrowserRouter를 불러와 routing을 준비한다.
- /src/App.js
import './App.css';
import { Routes, Route, Link} from 'react-router-dom'
function App() {
return (
<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를 이용해서 각각의 컴포넌트에 주소를 매칭해준다.
<Route path = '/' element={<Home />} />
<Route path = '/mypage' element={<MyPage />} />
<Route path = '/dashboard' element={<Dashboard />} />
</Routes>
</div>
);
}
function Home(){
return <h1>Home</h1>
}
function MyPage(){
return <h1>Mypage</h1>
}
function Dashboard(){
return <h1>Dashboard</h1>
}
export default App;결과
