리액트와 SPA

리액트

React / React.js / ReactJS

자바스크립트 라이브러리의 하나

사용자 인터페이스를 만들기 위해 사용

개발자 : 페이스북

 

기능

- JSX 문법

      자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법

- 컴포넌트 기반

      여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가

- Virtual DOM

      (DOM(Document Object Medel) : 문서 객체 모델. DOM의 요소를 수정할 때마다 불필요한 연산까지 매번 일어남.)

      변화를 가상 DOM에서 미리 인지해 변화시키기에, 렌더링도 되지 않고 연산 비용이 비교적 실제 DOM보다 적다.

      가상 DOM은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지하여 업데이트 시켜줌.

 

 

 

 

SPA

single-page application

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트.

 

장점

웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드.

이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로

(1)전체적인 트래픽을 감소할 수 있고, (2)전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

 

단점

- 초기 구동 속도

  : 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느림.

- SEO(검색엔진 최적화) 문제

  : 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이라 발생하는 이슈.

    Angular 또는 React 등의 SPA 프레임워크는 서버 렌더링을 지원하는 SEO 대응 기술이 이미 존재하고 있어 SEO 대응이 필요한 페이지에 대해서는 선별적 SEO 대응이 가능.