React.js - SPA / React Router

 SPA 란?

Single Page Application(싱글 페이지 에플리케이션)의 약자

 -기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니라 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

 

규모가 큰 웹사이트의 경우 수백개의 웹페이지가 존재하는데 이것을 각 페이지마다 HTML로 만드는 것은

상당히 비효율적이고 관리하기 힘들다.

그래서 하나의 HTML에다가 사용자가 특정 페이지를 호출할 때 그 HTML에다가 내용을 채워서 보내주는 것이 SPA이다.

이러한 Single-Page Application을 만드는데 가장 많이 쓰이는 javascript 라이브러리 중 하나가 바로 React이다.

 

 SPA의 단점

1.  앱의 규모가 커지면 자바스크립트 파일이 너무 커진다.
2.  첫 화면의 로딩 시간이 다소 길다.
3. 검색엔진 최적화에 좋지 않다.

 

 React Router

라우팅이란 사용자가 요청한 URL에 따라 맞는 페이지를 보여주는 것을 의미한다.

React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.

 

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작 할 수 있도록 여러 종류의 컴포넌트를 제공한다.