SPA(Single Page Application)
한 개의 페이지로 이루어진 애플리케이션
과거의 웹사이트는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줬다.
이렇게 화면 전환이 일어날 때마다 html을 계속 서버에 새로 요청하면 사용자의 인터페이스에서 사용하고 있던 상태를 유지하는 것도 번거롭고, 바뀌지 않는 부분까지 새로 불러와서 보여 주어야 하기 때문에 불필요한 로딩은 비효율적이다.
➡ 하지만 SPA는 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록하는 방식으로 바뀌었다.
즉, 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 하고 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트를 해준다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있도록 한다. (클라이언트 사이드 렌더링)
- 장점
1. 하나하나 화면 전체를 렌더링할 필요가 없기 때문에 화면이동 빠름
2. 화면에 필요한 부분의 데이터만 받아서 렌더링 하기에 처리과정 효율적
3. 유저에 입장해서 사용하기 편리
- 단점
1. 초기에 애플리케이션에 필요한 모든 정적 리소스를 한번에 다운로드 받기 때문에 초기 구동 속도가 느림
2. 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해 가지 못함
라우팅
다른 주소에 다른 화면을 보여 주는 것
리액트 라이브러리 자체에 이 기능이 내장되어 있지는 않지만 브라우저의 API를 직접 사용하여 이를 관리하거나, 라이브러리를 사용하여 작업 할 수 있다.
➕ 리액트 라우팅 라이브러리
리액트 라우터(react-router), 리치 라우터(reach-router), Next.js 등이 있으며 그중에 역사가 가장 길고 사용 빈도가 가장 높은 것은 리액트 라우터 이다.
❕ 리액트 라우터(react-router) ❕
클라이언트 사이드에서 이루어지는 라우팅을 아주 간단하게 구현할 수 있도록 해주며 서버 사이드 렌더링을 할 때도 라우팅을 도와주는 컴포넌트들을 제공해 준다.
