React SPA란?

SPA

# 시작하며

프론트 웹 개발을 한다면, 한번쯤은 SPA에 대해 들어볼 수 있을 것이다. 하지만 SPA가 무엇이냐? 라는 질문에 선뜻 대답을 하지 못한 경험이 있어, 개인적으로 복습하며 정리해 보려고 한다.  이제는 너무나 당연하듯이 사용하고 있어 웹 개발 자체에 녹아들어버린 느낌이 드는 SPA 개발이란 무엇일까?

 

전통적인 웹 사이트의 경우에는, 문서 하나에 전달되는 데이터의 양이 많지 않았다. 따라서 어떠한 요소를 한번 클릭했을 경우에, 완전히 새로운 페이지를 서버에서 전송해 주는 방식을 자주 사용했다. 이러한 방식이 문제가 되는 경우는, 점차 웹 사이트가 고도화됨에 따라 한 페이지에 할당되는 용량이 커졌을 때 발생하게 된다. 

 

# SPA(Single Page Application)

위의 문제를 해결하기 위해 등장한 것이 바로 SPA(Single Page Application)이다. 다소 직관적인 이름에서도 파악할 수 있듯이, 웹 사이트의 전체 페이지를 Single Page에 담아 동적으로 화면을 전환하며 표현하는 방법이다. 어떠한 이벤트가 발생하면 상호작용을 위한 최소한의 요소만 변경된다. 

 

그렇다면 Single Page에 화면이 보여진다고 해서 한 종류의 화면이라고 할 수는 없다. 사용자에게 보여준 페이지는 Single Page이지만, 사용자가 원하는 페이지와 브라우저 주소 상태에 따라 다양한 화면을 보여주는 것이 가능하다. 이렇게 다른 주소의 다른 화면을 보여주는 것을 Routing이라고 한다. 해당 Routing은 리액트 라이브러리 자체에 기능이 내장되어 있지는 않지만 브라우저 API를 직접 사용하여 관리하거나 라이브러리를 사용하여 쉽게 구현할 수 있다.

 

• React Routing Library

- react-router

- reach-router

- next.js

 

 

• SPA 단점

-  SPA의 단점은 애플리케이션의 규모가 커질수록 Single Page에 담기는 JS 파일이 커진다. (페이지 로딩 시 실제 사용자가 방문하지 않을 수도 있는 페이지 스크립트 또한 불러옴)

- SEO, 크롤러가 페이지 정보를 수집하지 못해 페이지 검색이 힘듦. (대형 포털 싸이트에 검색이 안되는 경우가 발생한다.)