1/25 일일정리 SPA

SPA(Single Page Application)

출처:codestates

등장배경

기존의 웹페이지는 다른 페이지로 이동할 때 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야만 했다.

웹사이트가 보다 복잡해지고 애플리케이션 형태를 가지게 되면서 사용자와 서버간의 상호작용이 많아졌는데, 기존의 방법은 매번 새로운 페이지 전체를 불러와야 했기 때문에 서버와의 불필요한 트래픽을 발생시켰다.

1990년대 후반에 페이지 전체를 불러오는 것이 아니라 필요한 데이터만 받은 후 javascript로 동적으로 페이지 일부분을 생성하거나 수정하는 방식이 개발되어 사용되기 시작했다. 이것이 SPA의 시작이다.

 

개념

SPA란 서버로부터 완전한 새로운 페이지를 불러오지 않고, 필요한 데이터만 받아서 그 정보를 기준으로 현재 페이지를 업데이트함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다.

 

SPA의 장점

- 필요한 부분만 업데이트를 하기 때문에 사용자와의 interaction에 빠르게 반응한다.

- 서버에 요청받은 데이터만 넘겨주기 때문에 서버 과부하 문제가 현저하게 줄어든다.

- 전체 페이지를 랜더링 할 필요가 없기 때문에 더 나은 사용자 경험을 제공한다.

 

SPA의 단점

- Javascript 파일의 크기가 크기 때문에 첫 화면의 로딩 시간이 길어진다.

- 검색 엔진 최적화에 좋지 않다. 검색 엔진은 HTML 파일을 분석하는데 SPA의 경우 HTML 파일에 별다른 자료가 없다.

   다만, SPA에 맞는 검색 엔진도 개발되는 추세여서 이 단점은 점차 사라지고 있다.

 

 

React Router

SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지는 않는다. 이런 화면의 주소가 다 다르다.

이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 '경로에 따라 변경한다.' 라는 의미로 라우팅(Routing)이라고 한다.

React 자체에는 이기능이 내장되어 있지 않기 때문에 React Router라는 라이브러리를 사용한다.

 

React Router 활용 실습

React Router의 컴포넌트는 크게 3가지로 구분할 수 있다.

라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes, Route 그리고 경로를 변경하는 Link가 있다.

 

BrowserRouter 컴포넌트는 React Router DOM이 사용되는 부분의 최상위 컴포넌트로 위치해야 한다.

BrowserRouter 컴포넌트

 

Routes 컴포넌트는 여러 Route 컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링하는 역할을 한다.

Route 컴포넌트는 path 속성을 지정하여 해당 Path에서 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

Routes, Route 컴포넌트

 

Link 컴포넌트는 경로를 연결한다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 페이지의 주소만 변경해 준다.

Link 컴포넌트