React SPA

전통적인 웹사이트: 페이지 전체를 로딩
중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽
한편, 사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 가짐 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만듬

SPA: Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 X
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트
(Youtube, facebook, Gmail, airbnb, Netflix 등 우리가 일상적으로 사용하는 다양한 서비스들)

단점:
javaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어짐
검색 엔진 최적화가 좋지 않다.
다만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세

Wireframe

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

페이지 만들기 이전,
어떤 컴포넌트를 만들고 이들을 조합할지부터 구상

어떤(ex

) 컴포넌트를 한번만 만들어 재사용(반복되는 구성이므로)

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

React Router

Achievement Goals
React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다.
React Router DOM를 이용하여 SPA를 구현할 수 있다.
라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

라우팅(Routing) :
다른 (페이지) 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미

React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용
Import: 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용
React Router의 주요 컴포넌트는 크게 3가지
router 라우터 역할을 하는 BrowserRouter :
웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할/ BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용가능

route matchers 경로를 매칭해주는 Switch 와 Route
<Switch 컴포넌트는 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. Switch 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.

Route 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.

route change경로를 변경하는 역할을 하는 Link

페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해 줍니다.
to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결

React router의 특성상 exact속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 Route 컴포넌트를 모두 보여줍니다. exact는 주어진 경로와 정확히 일치해야만 설정한 Route 컴포넌트를 보여주는 역할을 합니다.
Home을 위에 둔 상태에서 exact없이 활용한다면 어떻게 될까요? 중복되는 경로로 인해 다른 라우트로의 이동이 불가능

path location.pathname exact matches?
/one /one/two true no
/one /one/two false yes
[표] exact 속성의 유무에 따른 라우팅 분기