[React] SPA(Single Page Application) 알아보기

 

SPA란?

SPA란 Single Page Application의 약자로, 브라우저가 최초 하나의 모든 페이지 요청으로 전체 웹앱을 사용하는 방식이다.
기존의 전통적인 웹 사이트는 MPA(Multi Page Application), 여러개의 페이지로 구성된 어플리케이션으로 브라우저에 새로운 요청이 있을 때마다 서버에서 전체 페이지를 렌더링해주는 방식이다. 그렇기에 사소한 변경사항에도 전체 페이지가 다시 불러와져 화면이 깜빡거리게 되어 사용자에게 좋지 못한 경험을 줄 수 있다. 하지만 SPA 방식을 통해 새로운 요청이 있을 시에 특정 부분만 렌더링을 하여 사용자에게 빠른 인터렉션을 제공할 수 있게 된다. 

 

SPA 장점

• 사용자에게 빠른 인터렉션을 제공해준다.
  • 변경된 특정 부분만을 AJAX와 같은 기술을 활용하여 데이터를 바인딩하기 때문에 화면 깜빡거림과 같은 사용자의 불편함을 없앨 수 있다.
• 네트워크 요청이 줄어든다.
  • 모든 리소스를 한번에 저장하여 매번 페이지 요청을 하지 않기 때문에 네트워크 요청이 줄어들어 든다.
• 개발 생산성이 좋다.
  • 컴포넌트 별로 개발을 하기 때문에 재사용할 수 있는 이점이 있어 생산성에 영향을 준다.

 

SPA 단점

• 초기 페이지 로딩 속도가 느리다.
  
  • 모든 리소스를 최초에 저장하기 때문에 MPA에 비해 상대적으로 초기 로딩 속도가 느리다.
• SEO(검색엔진최적화)가 어렵다.
  
  • MPA방식에 비해 SEO가 불리하다. 검색 엔진이 크롤링을 할 때 자바스크립트를 실행하지 않고 빈 상태의 코드를 크롤링하기 때문에 서치 로봇에 스캔될 확률이 매우 낮다.
• 브라우저의 성능이 저하된다.
  • 빈번한 DOM 조작이 일어나기 때문에 브라우저의 성능이 저하될 수 있다.

 

SPA에서의 라우팅

ajax 방식

먼저 ajax는 자바스크립트를 이용하여 비동기적으로 서버와 데이터를 교환하는 통신 방식을 의미한다. 전체 페이지가 리렌더링 되는 것이 아닌 일부만 리렌더링 되는 효과를 보여준다.

<ul id="list">
	<li><a href="/">Home</a></li>
    	<li><a href="/info">Info</a></li>
    	<li><a href="/about">About</a></li>
</ul>

ajax는 리스트의 클릭 이벤트를 감지하여 preventDefault 메서드를 이용하여 서버의 요청을 막은 후 anchor tag의 href의 경로를 통해 ajax 요청을 한다. 이 방식은 서버로부터 페이지 전체를 리로드할 필요 없이 일부만 갱신되는 효과를 보여줄 수 있다.
하지만 이 방식은 history를 관리하지 않기 때문에 뒤로가기 또는 앞으로가기가 동작하지 않고, 새로고침 시 첫 페이지가 로딩이 된다. 또한 SEO가 어렵다는 문제가 있다. 

 

hash 방식

hash방식은 앞서 얘기한 ajax 방식의 history 관리가 되지 않는다는 단점을 보완해준다. hash 방식 또한 ajax와 같이 anchor tag를 사용하여 href의 경로를 통해 요청한다. 하지만 이 경로가 URL이 동일한 상태에서 hash 부분만 변경되어 브라우저는 서버에 요청을 보내지 않는다. 즉 페이지가 갱신되지 않는다.

<ul id="list">
	<li><a href="#">Home</a></li>
    	<li><a href="#info">Info</a></li>
    	<li><a href="#about">About</a></li>
</ul>​

 

그러므로 hash 방식은 고유의 URL이 존재하므로 history 관리에 문제가 없다. 하지만 여전히 SEO가 어렵다는 문제가 있다.

 

참고자료

SPA & Routing | PoiemaWeb

SPA & Routing | PoiemaWeb

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript