[React] SPA 란?

불안하게 오늘 작성한 코드들이 날 괴롭히지 않는다...

1. SPA란?

SPA는 Single Page Application의 약자이다.
예전에 웹 페이지에서는 페이지를 보여줄 때 여러 페이지로 구성이 되어있었다.
A html, B html, C html....
그리고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아와서 렌더링 했다.
즉, 웹 애플리케이션 뷰를 서버에서 담당했었다. 하지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 데이터 정보 전송 과부하로 인한 속도 저하 등 문제점이 생기게 되었다. 그래서 요즘 나오는 라이브러리 또는 프레임워크는 뷰 렌더링을 서버가 아닌 웹 브라우저가 담당한다.

예전에는 페이지를 요청할 때마다 서버로 접속하여 받아왔기 때문에, 페이지가 매번 새로고침 되었지만,
SPA의 경우 서버에서 제공하는 페이지가 한 개이며이다.

그렇다고 해서 화면이 한 종류인가?

위 질문에 대한 대답은 NO ! 라고 말할 수 있다.

• 사용자에게 보여준 페이지는 한 페이지지만, 사용자가 원하는 해당 페이지와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.
• 다른 주소에 다른 화면을 보여주는 것을 한다.

React Router 종류

1. react-router
2. reach-router
3. next.js

일단은 이렇게 3가지가 있고 router는 다음 게시글에서 알아보자.

SPA 단점

1. 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것이다. (페이지 로딩 시 실제 사용자가 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문이다)
2. SEO , 크롤러가 페이지 정보를 수집하지 못하여 페이지 검색이 힘들다. (구글, 네이버 같은) 대형 포털사이트에 검색 안될 경우도 있음.

왜 이럴까?
REACT 같은 경우는 index.html파일에
<div id="root"></div>
가 있고, 우리는 index.js에

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

자바스크립트가 로딩이 되기 전에 DOM 은 비어있어서 그럴 수도 있다는 생각을 해봤다.
실제로 자바스크립트가 실행될 때까지 페이지가 비어 있어서 로딩 대기 중의 짧은 시간 동안빈페이지가 화면에 띄워져 있는다.