---

React

SPA(Single Page Application)

• 단일 페이지로 구성된 웹 애플리케이션.
• 기존 MPA(Multiple Page Application)에서 페이지(네비게이션)를 이동할 때.
  • 라우팅(Routing); 사용자가 요청한 URL, evevt에 따라 페이지를 렌더링 하기 위해 필요한 리소스를 서버로 부터 요청하고 받는 행위.
  • MPA는 SSR(Server Side Rendering), 즉 라우팅을 서버에 의존함.
  • 이러한 과정 때문에 새로고침이 발생되고, 변경이 필요없는 부분(정적 리소스)까지 다시 갱신함. (Html, CSS, JS)
  1. 서버로 필요한 페이지 리소스 요청(Request).
  2. 필요한 리소스 받음(응답; Response).
  3. 받은 리소스를 브라우저에서 렌더링.
• SPA는 이러한 서버 라우팅 과정을 최소화 시킴.
• 모든 정적 리소스는 최초 접속때 한번 다운로드. (초기 구동 속도가 느린 단점)
• 페이지 이동 시 기존 페이지의 내부를 수정해서 렌더링. CSR(Client Side Rendering)
• 페이지 갱신시 데이터가 필요하면 그 부분만 전달받아(Ajax) 렌더링함. (새로고침; 깜빡임 없이 이동)
• 전체적인 트래픽 감소와 렌더링 효율 상승. (규모가 충분히 클때)
• 앱처럼 자연스러운 UX제공.
• SEO(Search Engine Optimization) 부적합하다는 이야기가 있음.
• SPA & CSR, MPA & SSR 꼭 이렇게 함께 가는 것은 아님.

가상돔(Virtual DOM)

• DOM 자체는 속도가 빠름. (DOM에 대한 내용은 여기)
• 규모가 큰 웹 애플리케이션에서 DOM을 접근할 때 문제를 동반.
• DOM에 변화가 생길 때 마다,
  1. 노드를 찾기위해 매번 document 전부를 훑음.
  2. 찾은 노드를 변경하면 렌더링(CSS연산, 레이아웃구성, 리페인트)이 다시 진행. (리렌더링)
• 이러한 부분이 속도 저하와 많은 버그를 동반하게 됨.
• 개선하기 위해 React는 DOM을 직접 접근하지 않고, 가상돔(Virtual DOM)을 이용하여 업데이트.
• 가상돔은 메모리에 위치하는 자바스크립트 객체. (메모리에 위치하여 DOM보다 속도가 빠름)
• 브라우저 DOM(real DOM)의 사본.

1. 앱이 변경 될 때 변경 이전의 가상돔과 변경 하려는 가상돔을 비교함. (Diffing)
2. 최소한의 변경사항을 찾고 브라우저의 DOM에 패치. (Reconciliation; 재조정)

• 10개의 노드가 변경 되었을 때 DOM에 직접 접근한다면 10번의 반복 수정(리렌더링).
• 하지만 가상돔은 10개의 element의 변경을 집단화시켜 한 번에 받아와 한번만 리렌더링.

시작하기

• 새로운 React 프로젝트 만들기.

$ npx create-react-app 프로젝트명

• 리액트 페이지 열기.

$ npm start

---