Chapter 1. React SPA

학습 목표

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

1-1. React SPA

---

SPA(Single Page Application)

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

• 장점

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

• 단점

  • SPA의 경우 JavaScript 파일의 크기가 큼
    • JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어짐
  • 검색 엔진 최적화가 좋지 않음
    • HTML 파일에 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못함

Wireframe

• 디자인에 들어가기 전 단계로 선(wire)을 이용해 윤곽선(frame)을 잡는 것
• 목업(mockup): 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것
• 페이지를 먼저 만들기 전에, 컴포넌트를 먼저 만들고 조립
• 컴포넌트들끼리 유기적으로 주고받을 수 있도록 설계해야 함

Chapter 2. React Router

학습 목표

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

2-1. React Router

---

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

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

• 화면에 따라 "주소"도 달라짐

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

• React Router

  • 주요 컴포넌트
    • BrowserRouter : 라우터 역할
    • Routes, Route : 경로를 매칭하는 역할
    • Link : 경로를 변경하는 역할
    • 명령어 : import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
      • import는 필요한 모듈을 불러오는 역할, 비구조화 할당과 비슷하게 이용할 수 있음