React SPA

Achievement Goals

• SPA(Single-Page Application) 개념을 이해해야 한다.

• SPA의 장,단점에 대해 알아야한다.

• 와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할지 스스로 정할 수 있어야 한다.

SPA(Single-Page Application
서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹어플리케이션이나 웹 사이트

SPA의 등장배경

전통적임 웹사이트 에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 불러오지 않는다.
웹사이트가 보다 복잡해지고 어플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이데 더욱 많은 상호작용이 일어나면서 Header나 Navigation Bar등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰고 사용자에게 느린 반응성을 주었다.
1990년대 후반에 HTML문서 전체가 아닌 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 Javascript가 동적으로 HTML요소를 생성해서 화면에 보여주면서 싱글페이지 어플리케이션 , SPA가 보편화 되었다.

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웹 어플리케이션이나 웹사이트를 말한다.

SPA의 장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction에 빠르게 반응한다.

• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 헌저하게 줄어든다.

• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 UX를 제공한다.

• 이런 SPA방식으로 만들어진 Youtube, facebook, Gmail, airbnb, Netflix등 우리가 일상적으로 사용하는 다양한 서비스 들이 SPA방식으로 제작되어 있다.

SPA의 단점

• SPA경우 Javascript 파일의 크기가 크다. 때문에 Javascript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
  • 브라우저는 첫 화면 로딩시에 HTML파일을 읽어들인 후 그 안의 script tag안에 있는 Javascript 파일을 다시 받아오는 과정을 거친다.
  • 이때 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 Javascript 파일 안에 들어있다보니 자연스럽게 Javascript 파일이 무거워진다. 때문에 이 Javascript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.

• 검색 엔진 최적화 (SEO)가 좋지 않다. 구글이나 네이버 같은 검색엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA의 경우 HTML파일은 별다른 자료가 없기 때문에 검색엔진이 동작하지 못한다.

Wireframe

React에서 컴포넌트를 어떻게 나누어야하는가 그리고 나누는 것에 대해 왜 고민이 필요한가

Wireframe은 디자인에 들어가기 전 단계로 , wire(선)를 이용해 frame(윤각선)
을 잡는 것을 말한다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있다.
추가적으로 목업이란 것은 데스크톱, 스마트폰의 프레임을 덧씌워서 직관적으로 이해하기 쉽게 디자인 한 것을 의미한다.

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

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

페이지를 만들기 전, 컴포넌트를 먼저 만들고 조립한다.

• React를 이용해 어떻게 어플리케이션을 만들시 상상해보면 , 컴포넌트 기반 개발방법을 배웠기 때문에 먼저 페이지를 만드는 것 보다는 어떤 컴포넌트를 만들고 조합할지부터 구상해야한다.
  • 먼저 화면 상단의 경우 , 상단 전체를 의미하는 <Header></Header>라는 컴포넌트가 있고 어플리 케이션 내의 어떤 페이지에도 항상 상단에 위치함으로 한번만 만들어서 모든 페이지에서 사용할 수 있도록 로직을 짜야한다. 그리고 , 자식으로 Search와 Setting이라는 컴포넌트를 만들어야 한다.
  • 메인화면에 나열되는 영상 정보들은 디테일은 달라도 기능과 Layout은 동일 하니 <Content/>컴포넌트는 어러번 재사용이 가능하다는 생각을 해야한다. 그래서 결과적으론 화면 중앙에는 영상을 담고 있는 컨텐츠 리스트라는 컴포넌트가 있고 , 그안에는 동일한 형태를 가진 영상물들이 반복적인 형태로 화면을 구성하고 있기 때문에 컨텐츠라는 컴포넌트를 한번만 만들어 재사용한다.
  • 근데 과연 이게 끝일까? 가장 작은 단위의 컴포넌트를 분석해보면 콘텐츠 컴포넌트 상단에는 썸네일, 중앙에는 채널사진,영상소개글, 하단에는 채널 이름과 조회수, 업로드한 날짜가 기재되어있다.

  속성  				값
  thumbnail 		"Developer.jpg"
  video 		"willBeADeveloper.mp4"
  avatar 		"Coz.jpg"
  description 		"올해에는 개발자가 되세요"
  channel name 		"Code States"
  views 		120k
  date 			3weeks ago

이렇게 콘텐츠 컴포넌트는 영상과 관련된 데이터를 입력 받아 , UI에 맞게 화면에 출력해준다. 그리고 클릭 시 해당 영상을 재생해 주는 기능도 가지고 있다.

• 이뿐만 아니라 이 데이터는 영상이 유튜브 우측 대기 목록에 있을 때에도 동일한 내용이 화면에 출력된다.어떤 상태로 있느냐에 따라 출력되는 위치만 조금씩 달라진 뿐이다.

• 컴포넌트가 UI의 필수 요소란 정의도 맞고 , 각자 고유의 기능을 가지고 있다는 정의도 맞지만 조금 더 고차원의 React 개발자라면 , 어플리케이션 안에서 다뤄지는 데이터를 컴포넌트끼리 보다 유기적으로 주고 받을 수 있도록 설계해야한다.
• React Router와 함께 컴포넌트 활용도 할 수 있다.

React Router

Achievement Goals

• React에서 npm으로 React Router DOM을 설치 npm install react-router-dom

• React Router DOM을 이용하여 SPA (Single-Page-Application)을 구현할 수 있어야 한다.

• 라우팅 구조를 짤 수 있어야 하고 , 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

React Router를 이용한 React SPA 개발방법

SPA는 하나의 페이지를 가지고 있지만 , 사실 한 종류의 화면만 사용하지 않는다.

• 예를 들어 , Twittler와 같은 SPA만들 때 메인 트윗 모음 페이지, 알림페이지, 마이 트윗 페이지 등의 화면이 필요할 수도 있다.

• 그리고 화면에 따라 페이지 주소도 달라진다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라는 의미로 라우팅 (Routing)이라고 한다.

• 하지만 , React 자체에 이 기능이 내장되어있지는 않다. 그래서 직접 주소마다 다른 뷰를 보여줘야 한다.

• React SPA에서는 라우팅을 위해서 React Router라는 라이브러리를 가장 많이 사용한다.

React Router 활용 (주요 컴포넌트)

React Router 의 주요 컴포넌트는 크게 세 가지로 나눌 수 있다. Router 역할을 하는 BrowserRouter, 경로를 매칭해주는(route matchers) Switch, Route, 그리고 경로를 변경해주는 역할(route changers)을 하는 Link이다.

• 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다. 다음 명령어를 통해서 사용할 수 있다.
• import { BrowserRouter,Switch,Route,Link } from "react-router-dom";
import는 필요한 모듈을 불러오는 역할로 비구조화 할당 (destructuring assignment) 과 비슷하게 이용할 수 있다. 본격적으로 해당 컴포넌트들을 이용해서 라우팅 해보자.

• <BrowserRouter>

• <Switch>

• <Route>

• <Link>