SPA & Router 🐾

SPA

: Single Page Application
: 말 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미

기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 이렇게 사용자에게 보이는 화면은 서버 측에서 준비했다.

현재 웹에서 제공되는 정보가 무수히 많이 때문에 새로운 화면마다 서버 측에서 모든 뷰를준비한다면 성능상 문제가 발생할 수 있다.트래픽이 너무 많이 나오거나 불필요한 로딩이 많이 생기거 등등

그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다. 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있다.

SPA의 단점

앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것 (페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 스크립트도 불러오기 때문) but 앞으로 배울 코드 스플리팅(code spliting)을 사용하면 라우트별로 파일들을 나누어 트래픽과 로딩 속도를 개선할 수 있다!

• ~~blabla 이해해야하는 부분. 서버 사이드 렌더링(server-side-rendering)를 통해 모두 해결할 수 있다.

Router

: 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 한다.
: 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업
: 과거에는 서버에서 관리하는 로직이였지만 이제는 클라이언트 사이드에서 아주 간단하게 구현할 수 있다.
: 한개의 웹페이지(html)안에서 여러 개의 페이지를 보여주는 방법이 Routing

리액트 라이브러리 자체에는 이 기능이 내장되어 있지는 않다. 그 대신 브라우저의 API를 직접 사용하여 이를 관리하거나, 라이브러리를 사용하여 이 작업을 더욱 쉽게 구현할 수 있다.

리액트 라우팅 라이브러리는 리액트 라우터(react-router), 리치 라우터(reach-router), Next.js등이 있다.