SPA

SPA (Single Page Application)

한 개의 페이지로 구성된 애플리케이션

• 클라이언트 사이드 렌더링 (CSR, Client Side Rendering)

MPA (Multi Page Application)

여러 개의 페이지로 구성된 애플리케이션

• 서버 사이드 렌더링 (SSR, Server Side Rendering)
• 페이지 전환 시, 플리커(Flicker) 현상이 발생한다.

React의 SPA 구현 방법

React는 많은 데이터와 변수가 있지만 상태를 바라보고 있다가 상태에 따라서 업데이트한다. 상태 변경 함수를 통해 인지하고 화면을 업데이트한다.

왜 이렇게 복잡한 과정을 거칠까? 상태 변경을 감지하고 화면을 업데이트하는 React의 작동방식 때문이다.

대표적인 SPA 라이브러리 React이다. 리액트가 spa를 구현하는 방식은 상태를 사용하는 것이다. 상태 변경 함수 실행이 되면 상태 변경 인지를 하고 변경된 상태를 사용하는 컴포먼트만 업데이트한다. 상태 변경을 통해서 리 렌더링하고 업데이트가 필요한 부분만 업데이트한다.