[React] SPA란 무엇이며 언제 사용하는지...

SPA = Single Page Application의 약자이다.

말 그대로, 페이지가 하나인 어플리케이션이다.

예전에는 어떤 웹 어플리케이션을 만들때, 여러 페이지로 구성되었다.

A.html , B.html, C.html , D.html ....

그리고 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링했다.

즉, 웹 어플리케이션 뷰를 서버에서 담당했었다.

하지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 

데이터 정보 전송 과부화로 인한 속도 저하 등 문제점이 생기게 되었다.

그래서 요즘 나오는 라이브러리 또는 프레임워크는 뷰 렌더링을 서버가 아닌 웹 브라우저가 담당한다.

 

예전에는 페이지를 요청할때마다 서버로 접속하여 받아왔기 때문에, 페이지가 매번 새로고침 되었지만,

SPA의 경우 서버에서 제공하는 페이지가 한 개이며, 

로딩을 한 번 하고난 후에는 브라우저 내에서 나머지 페이지들을 정의하여 보여준다.

일단, 첫 번째 페이지를 받아온 후 다른 페이지로 이동할때는 서버에 새로운 페이지를 요청하는게 아니라,

새 페이지에서 필요한 데이터만 받아와서 다른 종류의 뷰를 만든다.

주소에 따라 다른 뷰를 보여주는 것을 라우팅(Routing)이라 부른다. 

리액트에서는 이 라우팅 기능이 기본으로 내장되어 있지 않기 때문에, 

라우팅 관련 라이브러리인 react-router를 설치해서 구현할 수 있다.

이 라이브러리는 클라이언트 사이드에서 진행하는 라우팅 과정을 쉽게 해준다.

리액트 라우터를 사용하면 페이지 주소를 변경했을 때, 주소에 따라 다른 컴포넌트를 렌더링 해준다.

또한, 주소 정보(파라미터, URL 쿼리 등)를 컴포넌트의 props에 전달하여 컴포넌트 단에서

주소 상태에 따라 다른 작업을 하도록 설정한다.

 

[SPA 단점]

앱 규모가 커질수록 자바스크립트 파일 크기도 너무 커지게 된다는 것이 단점이다.

페이지를 로딩할 때, 실제로 방문하지 않을 수도 있는 페이지와 관련된 컴포넌트 코드도 불러오기 때문.

 

(이후 추가할 예정...)

 

 

 

벨로포트님 블로그 참고했습니다. 추천 100번 합니다!

 

https://www.10000duck.com/ducks/38

10000duck - 안전을 위한 법이 우리의 보금자리를 위협합니다.