[React] 📜SPA _Single Page Application

✔️ SPA란?

Single Page Application

SPA란 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서
해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.

---

📜 SPA의 장점

빠른 업데이트와 렌더링 속도, 자연스러운 UI
DOM을 직접 수정하는 것이 아니라 업데이트해야 할 최소한의 부분만 찾아서 변경하기 때문에 빠른 업데이트가 가능하고, 전체 페이지를 업데이트 할 필요가 없기에 깜빡임이 없다.

재사용성
리액트는 모든 페이지가 컴포넌트로 구성되어져 있고, 하나의 컴포넌트는 다른 여러개의 컴포넌트로 구성될 수 있다. 따라서 레고 블록을 조립하듯 컴포넌트를 조합해서 사용할 수 있기에 재사용성이 좋다.

활발한 지식공유 및 커뮤니티
다수가 사용하기에 모르는 것을 바로바로 찾아서 볼 수 있다.

React Native
별도의 언어를 배워 모바일 앱을 개발하지 않고,
React Native를 활용하여 모바일 환경 개발을 할 수 있다.
(안드로이드 앱과 IOS 동시에 만들 수 있음)

---

📜 SPA의 단점

무거운 JavScript 파일
첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워진다. 즉, JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다는 것.

검색 엔진 최적화(SEO)에 불리
검색 로봇은 자료를 수집할 때에 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석한다. SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다. (하지만, SSR로 해결 가능하다.)

높은 상태관리 복잡도
React 에서는 성능 최적화를 하기 위해서는 State를 잘 관리하는 것이 중요하다.
웹사이트의 규모가 커져서 컴포넌트의 개수가 많아지면 상태관리의 복잡도도 증가하기에 State를 잘 관리하는 것이 어렵다. 그래서 보통 큰 규모의 프로젝트의 경우 Redux, Recoil , Mobx 와 같은 상태관리 라이브러리들을 사용한다.

새로운 버전에 대한 학습 요구
새롭게 공부할게 많다..

---

✚ 참고

📜 Dynamic Import

dynamic import는 then함수를
사용해 필요한 코드만 가져온다.

이 방식을 사용하면 번들링 시 분할된 코드(청크)를
지연 로딩시키거나 요청 시에 로딩할 수 있다.

이렇게 사용자가 from을 통해 양식을
제출한 경우에만 가져오도록 할 수 있다.

form.addEventListener("submit", e => {
  e.preventDefault();
	/* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있다. */
  import('library.moduleA')
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    /* moduleA를 여기서 사용한다. */
}

dynamic import는 React.lazy 와 함께 사용할 수 있다.

---

📜 createRoot API

React 18 버전에서는 createRoot API를 사용하기 때문에
더 이상 ReactDOM.render를 지원하지 않는다.

/* React 18이전의 index.js */
const rootElement = document.getElementById("root");
ReactDOM.render(<AppTest />, rootElement);

-------
/* 바뀐 index.js */
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
    <App />
);

지금까지는 Concurrent Mode라고 불렸지만,
이번에 Concurrent Feature로 바뀌면서 하나의 기능으로 들어오게 되었다.

그 중에는 Suspense 기능이 있는데, React 18 버전부터는
이 Suspense 기능을 이용하여 독립적으로 렌더링을 할 수 있게 되었다.