개요

React SPA 의 등장 대벽과 기본 개념에 대해 학습하고 컴포넌트를 어떻게 활용할 수 있을지 고민해 봅니다.

---

학습 목표

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

---

React SPA

전통적인 웹사이트에서는 깜빡임을 통해 "페이지 전체를 불러오는 행위"로 페이지 전환을 보여주고 있습니다.

• 최근 웹사이트는 사용자와 서브시 사이에 더욱 많은 상호작용이 일어나게 되었습니다.
• 하지만 이때마다 Header나 Navigation Bar 등 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다.
• 따라서 사용자에게 좋은 사용자 경험을 제공하기 어려웠습니다.

SPA 는 Menu 와 Footer 같이 페이지 전환 전후 중복되는 부분은 새로 불러오지 않습니다.

• 1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작하였습니다.
• 2000년대 중반부터 이러한 개발 방식이 보편화되었으며, 이것이 SPA 입니다.

SPA 정의

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

SPA 장점

• 사용자와의 상호작용에 빠르게 반응합니다.
• 서버 과부하 문제가 현저하게 줄어듭니다.
• 더 나은 유저경험을 제공합니다.

SPA 단점

• JavaScript 파일의 크기가 커서 첫 화면 로딩 시간이 길어집니다.
• 검색 엔진 최적화(SEO)가 좋지 않습니다.

SPA 인 웹사이트

• 유튜브
• 페이스북
• 지메일
• 에어비엔비
• 넷플릭스

---

와이어프레임

디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(fram) 잡는 것을 말합니다.
이 과정을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다.

• 웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대

목업

데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말합니다.

• 데모 시연, 평가를 위한 최소한의 기능만 담은 모형

React 이용한 개발 및 설계 순서

1. 어떤 컴포넌트를 만들고 이들을 어떻게 조합할지 계획 구상
   • <Header /> <- <Search />, <Setting />
   • <ContentList /> <- <Content />
2. 작은 단위의 컴포넌트부터 구현
   • Content { thumbnail, video, avatar, description, channel name, views, date }
   • 같은 컴포넌트가 재생중일때와 대기 목록에 있을 때 동일한 애용이 화면에 출력 위치, 크기만 다름

좋은 React 개발자

애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계, React Router 이용

---

참조

코드스테이츠 프론트엔드 부트캠프