[ React 기초 ] React SPA 알아보기

 

React SPA를 본격적으로 알아보기 전에 , React SPA가 생긴 이유부터 알아봅시다.

 

React SPA가 왜 도입되었을까요 ?

React SPA가 도입되기 전의 전통적인 웹 사이트에서는 사용자가 웹 사이트 내의 다른 페이지로 이동하면 

브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야만 했습니다.

또한, 웹 사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었습니다.

 

이러한 문제점들을 보완하기 위해 등장한 것이 React SPA 입니다.

 

그래서 React SPA가 뭐에오

• React SPA는  위에 있는 문제점들을 보완하여 HTML 문서 전체가 아니라 업데이트에 필요한 데이터만 받아 javascript가 이 데이터를 조작하여 HTML 요소를 생성하여 화면에 보여주는 싱글 페이지 애플리 케이션입니다.
• 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달 받고 브라우저에 해당하는 부분만 업데이트 하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.

 

SPA 장점을 알아볼까요 ?

• 애플리케이션과 사용자 사이의 상호작용을 빠르게 반응하고 과부하 문제를 줄일 수 있다.
• 화면 전체를 새로 렌더링 할 필요가 없기 때문에 보다 더 나은 사용자 경험을 제공할 수 있다.

 

SPA 단점을 알아볼까요 ?

• 첫 화면 로딩 시에 HTML 파일은 거의 비어있고, 대부분의 코드는 javascript 파일 안에 있어서 javascript 파일이 무거워지기 때문에 첫 화면의 로딩 시간이 길어지게 된다.
• HTML이 거의 비어 있다 보니 검색 로봇이 충분한 자료를 수집할 수 없기 때문에 검색엔진 최적화가 좋지 않다. 
  그렇지만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 발전하고 있기 때문에 검색엔진 단점은 점차 사라지고 있는 추세라고 하네요 !