SPA(Single Page Application)
SPA 란?
Single Page Application 이라는 뜻으로, 하나의 화면에서 필요한 내용만 업데이트 하여 사용자에게 정보를 전달하는 app 을 이야기한다.- 즉, 필요한 컴포넌트만 업데이트하고 나머지 컴포넌트는 그대로 둔다.
- 이와 반대되는 개념으로
MPA(Multi Page Application) 가 있다.
→ 페이지를 바꾸기 위해서 페이지 전부 불러옴
SPA의 장점
- 기존의 경우 새로운 화면을 불러오기 위해서는 항상 전체페이지를 불러와야 했는데, 이때 정적인 요소들도 새로 불러오게 되어 서버에 불필요한 트래픽이 많았다.
- 하지만, SPA 는 필요한 데이터만 받아 변경이 일어난 곳만 업데이트 하기 때문에 서버의 부담을 줄일 수 있다.
- 더불어, 필요한 부분만 업데이트를 하기 때문에 하나의 행동을 할 때마다 전체를 새로고침 하지 않으므로 반응성이나, 사용자 경험에도 장점을 가진다.
SPA의 단점
- 웹브라우저는 HTML 을 읽고 그 이후에 JS 파일을 읽어들이는데,
SPA의 경우 JS 파일에 모든 것이 몰려있다보니 첫 화면이 뜨기까지 비교적 시간이 걸린다.
검색 엔진 최적화(Search Engine Optimization) 가 잘 되지 않는다.- 웹 검색엔진들은 HTML 태그를 읽고 그 정보를 가져와 연관성이 높은 결과를 표시하는데, SPA의 경우 HTML이 거의 비어있기 때문에 불리하다.
와이어프레임
- 리액트로 웹 페이지를 제작하는 경우, 컴포넌트 기반으로 개발하기 때문에 어떤 컴포넌트를 만들어 어떻게 조합하고 배치할 지를 결정해야한다.
- 컴포넌트를 계획하면서 어디에서나 동일한 위치에 있는 것은 한번만 만들거나, 반복되어 출력되는 레이아웃의 경우 하나의 컴포넌트를 반복한다거나 효율적인 사고가 중요하다.
- 또한 서로 다른 컴포넌트가 동일한 데이터를 사용하는 경우, 내부 데이터의 유기적인 공유에 대한 설계 또한 필요하다.
→ 단방향 하향식 데이터 흐름
- 쉽게... 페이지 전체가 아니라, 내가 원하는 데이터만 새로고침된다.
- 새로고침되는 데이터가 작으니, 서버의 부하도 적다.
