React SPA

SPA (Single page Aplication)

서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라 화면 업데이트를 위한 필요 데이터만 서버에서 전달 받아 해당 부분만 업데이트하는 웹사이트를 말한다.

SPA 장단점?

• 장점
  • 사용자와의 interaction 에 빠르게 반응
  • 서버의 과부하 문제 감소
  • 전체 페이지를 렌더링 하지 않아 사용자도 편하게 받아들임
• 단점
  • Javascript 파일의 용량이 커짐
  • 첫 페이지의 로딩 시간이 상대적으로 길다
  • 검색 엔진에 최적화 되지 않음 (개선중!)

Wireframe

사이트 구성, 디자인에 들어가기 전에 선을 이용해 윤곽을 잡는 과정을 말한다. 여기서 디자인 컨셉, 사이트 주요 기능에 대한 이해가 가능하다.

React Router

Routing

다른 주소에 따라 다른 view를 보여주는 과정으로 React에 자제 내장된 프로그램이 아니라 npm으로 따로 설치해야한다.

npm install react-router-dom@^6.3.0

React Router 주요 컴포넌트

컴포넌트를 사용하려면 React Router 라이브러리에서 따로 불러오기!

import {BrowserRouter, Routes, Route, Link } from "react-router-dom"

• < BrowserRouter > : 페이지를 새로고침하지 않고도 주소를 변경 가능 (상위에 작성!)
• < Routes > : < Route > 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링
• < Route > : path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정하는데 < Link > 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
• < Link > : 경로를 연결해 주는 역할을 하는 컴포넌트이며, 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경