[React] SPA 그리고 React Router

🌈 SPA and React Router

 

💡 SPA -> Single Page Application

 

: 전통적인 웹페이지 사이트는 페이지 전체를 로딩하고, SPA는 Menu, Footer 와 같이 페이지 전환 후 전후에 중복되는 페이지 부분은 새로 불러 오지 않는다. SPA 는 HTML 전체가 아닌 업데이트에 필요한 부분만 서버에서 전달받아 동적으로 HTML 요소를 화면에 보여준다.

 

(Youtube, facebook, Gmail, airbnb, Netflix등 우리가 사용하는 다양한 서비스들이 SPA 방식으로 제작되어 있음.)

 

<장점>

- 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하기 때문에 사용자와의 Interaction에 빠르게 반응.

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

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

 

<단점>

- 첫 화면 로딩시 읽어들인 HTML 파일은 거의 비어 있고, 대부분의 코드를 자바스크립트 파일 안에 들어 있다보니 자바스크립트 파일이 무거워지고, 이를 기다리는 시간으로 인해 첫 화면의 로딩 시간일 길어짐.

- 검색 엔진 최적화가 좋지 않다. 검색 봇은 url 뿐만 아니라 HTML 문서 내의 태그나 링크 등을 분석하는데, 거의 비어 있어 로봇이 충분한 자료를 수집하지 못한다. 다만 검색 엔진이 최적화에 대응할 수 있도록 발전하고 있어 이 단점은 사라지고 있는 추세이다.

 

 

💡 React Router

 

: React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 사용한다. 

 

주요 컴포넌트

<BrowserRouter> -> 라우터 역할

<Switch>, <Router>  -> 경로 매칭

<Link> -> 경로 변경

 

이 컴포넌트들을 사용하기 위해서는 react router 라이브러리에서 따로 불러와서 사용해야한다.