SPA 방식에서는 오직 하나의 페이지만 가지고 있기 때문에 MPA 방식으로의 페이지 이동이 불가능합니다. 페이지 (html)가 아닌 데이터를 가지는 JS 파일로 구성이 되어 있기 때문입니다.
React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 입니다.
MPA(Multi Page Application)
일반적으로 우리가 웹사이트에 접속하려면, 서버에게 HTML파일에 대한 요청을 보낸다.
그럼 서버는 요청받은 HTML파일의 전송을 담당한다. 서버는 기존에 이미 index.html과 같은 다양한 HTML파일들을 만들어두고 클라이언트에서 요청하면 각종 프로그래밍 언어를 통해 데이터베이스에서 데이터를 꺼내 HTML과 비스무리한 ASP, JSP, PHP같은 파일들에 넣어준 후 이걸 HTML형태화 시켜서 전송합니다.
과거에는 웹에서 제공하는 정보가 그렇게 많지는 않았으나 점차 페이지에서 보여주어야 할 데이터들이 많아지고 그 결과, 페이지를 이동하거나 데이터가 동적으로 변하는걸 보여줘야 할 때마다 매번 새로운 정보를 보여줘야 하는 서버측에서 많은 과부하가 걸리게 되는 단점을 가지고 있습니다.
SPA의 등장
SPA는 이러한 MPA의 단점을 해결하기 위해 등장하였습니다.
서버에서 사용자에게 보여줄 파일을 온전히 부담하는것이 아니라, 브라우저에서 해결하도록 만든 것입니다.
그래서 DOM을 건들일 수 있는 자바스크립트가 등장하게 됩니다. 자바스크립트는 DOM을 건드릴 수 있는 유일한 프로그래밍 언어입니다. 또한 단 하나의 html 파일만 가지고 안의 내용물들은 전부 .js 파일의 DOM 조작을 통해 채우게 됩니다.
기존 MPA의 데이터베이스는 어떻게 되는데....? 🙄
과거엔 서버에 담긴 .jsp같은 파일이 있다면, 서버는 자바코드를 통해 데이터베이스와 연결해 데이터를 가져와 이 .jsp 파일에 담긴 결과물을 html 처럼 만들어 준 후, 사용자에게 보내주었습니다.
그렇다면 SPA의 프론트엔드에서 자바스크립트는 이걸 어떻게 해결 할 수 있었을까?
여기서 사용하는게 대체적으로 REST API 이다
REST API
자원의 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든것을 의미한다.
즉, 자원(resource)의 표현(representation) 에 의한 상태 전달
HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.
REST API를 하기 위해 대표적으로 Axios, Json 사용
Axios
SPA 단점
서버가 할일을 대신하는 자바스크립트의 역할이 커지게 됩니다. 즉 규모가 커질수록 파일이 너무 커진다는 단점을 가지고 있습니다. 물론 이를 해결하기 위해 코드 스플리팅을 사용하여 해결합니다.
Router의 등장
SPA는 하나의 html이기 때문에 다른 주소의 화면을 보여줄 수 없습니다.
그래서 리액트는 라우팅을 통해 다른 주소에 다른 화면을 보여주게 됩니다.
리액트의 라이브러리는 크게 3가지가 있습니다.
리액트 라우터리치 라우터Next.js
리액트 라우터는 이 중에서 가장 역사가 오래되기도 했고, 서버 사이드 렌더링에 적합하며 가장 많이 쓰이는 라우터입니다.
