React SPA

• SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.
• SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
• 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다.

SPA ?

화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹사이트를 말한다.

SPA의 장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아 업데이트 하면 되기 때문에 사용자와의 인터렉션에 빠르게 반응한다.
• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.
• 전체 페이지를 렌더링할 필요가 없어 더 나은 유저경험을 제공한다.

  유튜브, 페이스북, G메일, 에어비앤비, 넷플릭스 등

SPA의 단점

• JavaScript 파일의 크기가 커서 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
• 검색 엔진 최적화(SEO)가 좋지 않다. 구글이나 네이버 같은 검색엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색기능이 구동되는데, SPA의 경우 HTML파일은 별다른 자료가 없기 떄문에 적절히 동작하지 못한다.