● 3월 23일 Section 2 / Unit5 - [React] React SPA

● 오늘 공부한 것

• SPA(Single Page Application) VS MPA(Multiple Page Application)
  • SPA란 하나의 HTML을 기반으로 JavaScript를 활용하여 동적인 페이지를 보여주는 것을 말합니다.
  • 반대로 MPA는 사용자가 요청할때마다 여러개의 HTML을  서버에서 받아와 보여주는 것을 말합니다.

전통적인 방식에 의하면, SPA의 렌더링 방식은 CSR이고, MPA의 렌더링 방식은 SSR을 활용합니다. 

• CSR(Client Side Rendering)  vs SSR (Server Side Rendering)
  • CSR은 브라우저가 HTML과 JS를 요청해 페이지를 로드합니다. 로드되면 사용자의 상호작용에 따라 동적으로 렌더링 시킵니다.
  • SSR은 브라우저가 페이지를 요청할 때마다 새로운 HTML, CSS, JS 파일을 가져와 렌더링한다.

따라서 전통적인 웹페이지들은 SSR이었기 때문에, 서버 트래픽이 많았다. 하지만 각자 장단점이 있다.

• CSR 장단점
  • 장점
    1. 첫 로딩만 기다리면, 동적으로 렌더링이 빠르게 되기 때문에 사용자 경험이 좋다.
    2. 서버의 부담이 덜하다
  • 단점
    1. 모든 스크립트 파일이 오래걸릴 수 있다.
    2. 검색엔진 최적화에 문제가 있다.

브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거칩니다.이때 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워집니다.때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.

또한 검색엔진 봇은 HTML 문서 내의 자료를 분석하는데, CSR 같은 경우 HTML 파일이 거의 대부분 비어있기 때문에 검색엔진 최적화가 좋지 않은 것입니다.

 

• SSR 장단점
  • 장점
    1. 초기에 로딩 속도가 빠르다. 사용자가 컨텐츠를 빠르게 볼 수 있다.
    2. JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능하다.
  • 단점
    1. 매번 페이지를 새로 요청해야하기 때문에, 사용자 경험이 SPA보다 좋지 않다.
    2. 서버의 부담이 크다.

 

• 리액트 라우터
  • BrowserRouter
  • Routes
  • Route
  • Link
  • useNavigate

리액트 라우터는 window 객체인 history 객체를 사용하기 위해 나온 라이브러리라고 생각하면 된다. 리액트는 SPA 이기때문에 하나의 HTML 파일에서 동적으로 움직이게 된다. 기존 MPA는 뒤로가기 앞으로 가기의 구분이 있지만, SPA같은 경우 하나의 페이지기 때문에 이동하기를 인식하지 않는다. 따라서 리액트 라우터를 사용하여 브라우저의 history API를 쓸 수 있는 것이다.

리액트 라우터 같은 경우 라우팅 시스템은 사용자가 브라우저의 주소창의 경로에 따라 알맞은 페이지를 보여준다. 즉, 알맞은 컴포넌트를 보여준다고도 할 수 있겠다. SSR처럼 브라우저에서 새로운 HTML을 요청해 보여주는 것이 아니라, history API를 사용하여 브라우저의 창 값만 바뀌게 해주고 기존에 페이지에 띄웠던 웹 애플리케이션을 유지하면서 라우팅 설정에 따라 또다른 페이지를 보여주게 됩니다.

---

● 끝맺음

• 수업이외의 학습
  • 리액트 함수형 컴포넌트, 클래스컴포넌트, props
  • SPA, MPA, CSR, SSR
  • 유사배열객체 스터디 준비
  • 알고리즘 문제 두 개

[3장 컴포넌트]