SPA

등장 배경과 개념

• SPA란 Single Page Application의 약자

브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야함
SPa는 업데이트가 필요한 부분만 새로 불러옴(광고나 네이버 뉴스 돌아가는거)
전통적인 웹사이트는 새로고침할때 마다 전부 다 새로고쳐야해서 오래걸리고 트래픽도 늘어났다.
업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML요소를 생성해서 화면에 보여주는 방식 개발

웹 애플리케이션 보편화 이것이 SPA

SPA는 유저의 행동에 빠르게 반응

서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있고 화면 전체를 랜더링 할 필요가 없기에 유저들의 편의도 늘어난다.

단점으로 파일 크기가 커서 첫화면 로딩이 오래걸린다.
검색 엔진 최적화(SEO)가 좋지 못함등이 있다. 하지만 검색 엔진의 경우 시간이 지날수록 최적화가 되고 있다고 한다.

Route

• React Router

유튜브는 메인화면 외에도 구독한 사람의 채널이나, 영상을 볼때 등 유튜브 안에 많은 페이지가 존재한다.
화면에 따라 주소도 달라짐 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)
React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용

• React Router의 주요 컴포넌트

라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link
Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있다.

---

마지막으로...

import 로 땡기고 export로 보낸다.
props 는 다음 수업에 자세하게 배울 예정
컴포넌트를 각각 따로 js파일에 넣어놓고 필요한 컴포넌트를 import로 땡겨오는걸 통해 전에 배운 React가 좋은 이유에 대해서 다시한번 깨달았다.
그리고 문법으로만 배워오던 JS문법을 예제이긴 하지만 실제로 작성해보니 사용법을 더 알것만 같다.