1. React SPA
- Single Page Application의 줄임말로 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다.
2. SPA의 장점
- 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 interaction 에 빠르게 반응한다.
- 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부화 문제가 현저하게 줄어든다.
- 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.
3. SPA 의 단점
- SPA 경우 JavaScript 파일의 크기가 크다. 때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
- 검색 엔진 최적화(SEO)가 좋지 않다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다. 그래서 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야하고, 더불어 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야하기 때문에 개발의 복잡도가 더욱 늘어나야한다.
*MPA(Multiple Page Application)
4.Wireframe
- 와이어프래임은 웹페이지의 레이아웃과 UI요소 등에 대한 뼈대로 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말한다.
5. React Router
- 라우팅(Routing)은 다른 주소에 따라 다른 뷰를 보여주는 과정을 ‘경로에 따라 변경한다’라는 의미이다. Route는 '길' 이므로 주소라고 생각하면 되고, 와이파이 공유기를 Router라고 부르니 길을 뚫어준다고 생각하면 된다.
- React 자체에는 이 기능이 내장되어 있지 않다. 터미널에서 react-router-dom을 항상 npm 설치해주어야한다.
6. React Reouter의 주요 컴포넌트 3가지
1) Router: Browser Router
2) Route matchers: Switch & Route
3) Route changers: Link
** 아래와 같이 BrowserRouter로 Link, Switch, Route를 감싸줘야지 사용 가능하다
<BrowserRouter>
<Switch>
<Route>
....
</Route>
</Switch>
</BrowserRouter>
다시 보면, 더 많은 것들이 보인다.