SPA 란?
옛날의 웹사이트는 사용자가 웹사이트 내에 다른 페이지로 이동하면, 매번 HTML 파일의 '전체 페이지'를 불러와야만 했다.
웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 더욱 많은 상호작용이 일어났다. 이때마다 각종 중복되는 요소들을 불러오면서 서버에 불필요한 트래픽이 발생한 것이다. 이러한 이유로, HTML문서 전체가 아닌 업데이트의 필요한 데이터만 전달받아서 이 데이터를 javascrpit로 HTMl 요소를 생성해서 화면에 보여주는 방식이 개발되었는데 이게 SPA이다.
현재 많이 사용하는 SNS를 예로 들어보면 '좋아요'를 누르고, 댓글을 다는 등의 각종 상호작용이 수시로 발생하는데, 이때 SPA는 필요한 부분만 업데이트 하기 때문에, 서버의 과부하 문제도 해결하고 사용자에게 더 나은 경험을 제공한다.
그러나, 단점도 있다. 대부분의 코드들이 javascript에 있다보니 javascript파일이 무거워진다. 이로 인해 첫 화면 로딩시간이 길어질 수 있다. 또한 검색엔진에도 취약한데, 검색로봇은 자료를 수집할 때마다 HTML문서를 분석하는데, SPA는 HTML이 거의 비어있기 때문에 충분한 자료수집을 할 수 없다.
React Router
React SPA는 라우팅을 위해 'React Router'라는 라이브러리를 사용한다. React 자체에는 라우팅 기능이 내재되어 있지 않기 때문에 직접 주소마다 다른 뷰를 보여줘야 하기 때문이다.
React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.
이 컴포넌트는 사용하려면 React Router 라이브러리에서 따로 불러와야 하는데, 다음과 같은 명령어로 사용할 수 있다.
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";