Single Page Aplication 이란?
SPA는 이용자의 페이지 이동 시 매번 페이지 전체를 불러오는 것이 아닌, 중복되는 부분을 제외한 변경되는 부분을 동적으로 불러오는 방식을 의미한다.
전통적인 웹사이트는 이용자의 페이지 이동 시 매번 페이지를 새로 불러오는 방식이었다.
오늘날, 웹사이트가 보다 복잡해지고 사용자와 서비스 사이에 많은 상호작용을 필요로하는 웹 어플리케이션의 형태가 등장하게 되었고 이는 서버의 트래픽 수요를 증가시켰다.
이때, 전통적인 방식은 중복되는 요소를 새로 불러오는 불필요한 트래픽을 발생시켰고, 이는 사용자 입장에서 느린 반응성과 어플리케이션과 같은 UX를 제공하기 어렵게 만들었다(페이지 이동시 전체가 새로고침 되는 웹사이트의 한계...).
이에 필요 부분만 서버에서 데이터를 받아 JS를 통해 동적으로 변경하는 방식이 개발되었고 이것이 SPA이다.
SPA의 장단점
-
서버 입장에서 요청 받은 데이터만 넘겨주면 되기 때문에 과부하 문제를 일부 해결할 수 있다.
-
화면 전체를 새로 렌더링하는 것이 아니므로, 보다 나은 UX를 제공한다.
-
비교적 무거운 JS파일로 첫 화면의 로딩 시간이 길어질 수 있다.
-
JS를 통해 동적으로 렌더링 하는 방식이기에, HTML이 거의 비어있고 검색엔진 최적화(SEO)에 불리하다.
> 오늘날 검색엔진의 발달로 점차 해결 중인 문제점이다.
-
웹앱 안에서 브라우저의 뒤로 가기 등의 상태 관리를 별도로 처리해야 한다. => 개발의 복잡도 상승
React의 WireFrame
WireFrame은 구현 단계 이전에 선(wire)와 윤곽선(frame)을 잡는 것을 의미한다. 해당 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대해 이해할 수 있다.
React에서의 wireframe은 페이지를 설계하기보다 어떤 컴포넌트를 만들고 조합할지를 구상하는 과정을 의미한다.
영상사이트를 예시로 들었을 때, 상단의 head와 영상이 출력되는 content 하단의 footer로 컴포넌트를 구성했을 때, 단순히 큰 토대의 컴포넌트만을 고민하는 것만이 아니다.
content 내부에서 동작하게 될 영상바, 실제 영상 출력부, 각종 버튼들과 같은 세부 컴포넌트 또한 구상하는 과정이다.
React Router
전통적인 웹사이트와 달리 SPA는 페이지를 이동하지 않는다.
따라서, 주소에 따라 다른 컴포넌트를 보여주는 과정을 별도로 설계해야한다.
이를 '경로에 따라 변경한다'라는 의미로 라우팅(Routing)이라고 부른다.
npm install react-router-dom@^버전React Router는 react-router-dom 패키지에 포함된 컴포넌트들을 통해 구현할 수 있다.
이때, 각 컴포넌트의 기능은 다음과 같다.
- BrowserRouter : 라우터 역활을 하는 컴포넌트
- Routes : 경로를 매칭하는 컴포넌트
- Route : 세부 경로를 의미하는 컴포넌트
- Link : 경로를 변경하는 컴포넌트
이는 Link를 선택했을 때 해당 컴포넌트의 속성 값에 따라 올바른 Route를 호출하고 Route의 속성 값에 따라 웹 페이지에서 변경될 컴포넌트를 호출하여 렌더링한다.
