SPA(Single Page Application)란

과거의 웹사이트는 사용자에게 페이지를 보여주기 위해 서버로부터 웹페이지 전체를 불러왔다. 그러나 SPA를 이용하면 웹페이지가 전환되면서 바뀌어야하는 부분(예:Sidebar, Footer 등)만 불러올 수 있다. 즉 불필요한 중복 섹션들을 불러오는 문제(속도, 부하 등)들을 해결하고자 나온 것. 중복되지 않는 부분만 전달받아 이를 JavaScript가 조작하여 HTML요소로 보여주게 됨.

• Example : 페이스북에서 상대 글에 '좋아요'를 Click하였을 때 과거라면 '좋아요' 1을 올려주기 위하여 전체 웹페이지를 불러왔어야하나, 지금은 '좋아요' 부분의 카운트 데이터만 조작하게 됨.

SPA 단점

• 첫 화면 로딩 시, HTML파일의 Script태그의 내용을 불러와야하므로 로딩 시간이 길어짐.
• 검색 엔진 최적화에 불리함. 검색 엔진 자체가 HTML의 정보를 이용해 자료를 수집하는 반면에 SPA를 사용하면 HTML의 정보가 모두 JavaScript로 정리되기 때문. 그러나, 현재는 대응 방법들이 개발되고 있어 점점 단점이 보완되고 있는 추세임.

Wireframe과 Mockup

• Wireframe : 세부 디자인을 시작하기 전, 선을 이용해 기본적인 레이아웃을 잡는 것.
• Mockup : 사용자가 직관적으로 이해하기 쉽도록 디자인하는 것.

체계적인 설계

유튜브 어플리케이션을 훑어보면, 상단 Header 컴포넌트가 있고 그 하위 요소에는 search 컴포넌트와 option 컴포넌트가 있다고 가정해볼 수 있다. 화면 중앙에는 유튜버들이 업로드한 영상들이 list화되는 vedioList 컴포넌트가 있을 것이다. 그리고 각각의 업로드 된 영상들 또한 하나의 content 컴포넌트라고 할 수 있다. 그리고 이러한 영상은 vedioList의 하위요소에만 있는 것이 아닌 side 영역에도 존재한다. 이처럼 컴포넌트들끼리 유기적으로 주고받는 무언가를 개발자는 사전에 잘 파악하여 설계를 진행하는 것이 중요하다. 그리고 이를 도와주는 것이 React Router다.

React Router

SPA는 하나의 웹페이지를 가지고있지만, 웹페이지 내부의 화면은 여러개로 가지고 있음. 그리고 이 화면들은 모두 주소가 다르며, 주소에따라 다른 화면을 보여주는 과정을 Router라고 함. 그런데 React에는 Router기능을 내장하고있지 않으며 그렇기 때문에 사용하는 라이브러리가 React Router임.

React Router의 주요 컴포넌트

• BrowserRouter : 라우터 역할을 하는
• Switch, Route : 경로를 매칭해주는
• Link : 경로를 변경해주는