1. React SPA
1. SPA(Single-Page Application) 란?
서버로부터 새로운 페이지 전체를 불러와서 렌더링하는 것이 아니라, 페이지 업데이트에 필요한 데이터만 서버에서 전달받아와서 현재 웹 브라우저 페이지 내에서 해당 부분만 업데이트하는 방식으로 작동하는 웹 앱이나 웹 사이트.
2. SPA 의 장점
- SNS, 유튜브 등에서 수시로 앱-사용자 간에 상호작용이 발생할 경우, 필요한 부분만 업데이트하기 때문에 사용자의 행동에 빠르게 반응 할 수 잇음.
- 서버 입장에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저히 줄어듬
- 화면 전체 페이지를 렌더링 할 필요가 없어 더 나은 사용자 경험을 제공함
3. SPA 의 단점
- 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커져서 첫 화면 로딩 시간이 길어짐.(유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러옴)
- 검색 엔진 최적화(SEO)가 좋지 않음.(검색엔진은 HTML 파일의 자료를 분석하여 검색결과를 나타내는데, SPA 의 경우 HTML 에 자료가 적어 검색 엔진에서 충분히 자료를 수집하지 못함)
4. Wireframe 에서 컴포넌트로 구분하여 작성
- Wireframe : 디자인 전 단계에서 웹페이지의 레이아웃, UI 요소 들에 대한 뼈대(윤곽선)를 잡는 것.
- 반복적으로 쓰이는 컴포넌트를 우선으로 작성하여 어떤 컴포넌트들이 필요한지, 어떻게 조합하여 전체 UI 를 만들지 설계
- 컴포넌트들끼리 데이터를 유기적으로 주고받을 수 있도록 설계
2. React Router
1. Routing 이란?
- 주소에 따라 다른 뷰를 보여주는 과정.
- React 자체에는 Routing 기능이 내장되어있지 않아서 'React Router' 라이브러리를 사용함.
React Router : 경로마다 필요한 컴포넌트를 렌더링하는데 도움을 주는 라이브러리.
2. React Router 의 주요 컴포넌트
2-1. BrowserRouter :
History API를 사용하여 UI(컴포넌트)를 URL(주소)과 동기화된 상태를 유지해주는 역할.
항상 최상단에 있어야 함
-> index.js 에서 App 컴포넌트를 아예 감싸는 것이 좋음
<BrowserRouter> 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줍니다. 또한 <BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있습니다.
2-2. Routes :
Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링하는 역할.
Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. <Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.
<Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.
path=”*” 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 됩니다.
2-3. Route :
경로를 지정해주는데 사용함.
2-4. Link :
사용자를 원하는 경로로 이동시켜 주는 역할.
경로를 연결해 주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.
3. 사용법 :
1. React Router 라이브러리 설치하기 :
npm install react-router-dom@^6.3.0
(create-react-app으로 React 프로젝트 환경 생성 후, 해당 폴더 내에 설치)
2. 컴포넌트 불러오기 :
import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
-> 라이브러리 객체에서 프로퍼티 명으로 내용 가져오는 것과 같음!(구조분해 할당)
사용 예시
import React from 'react'; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from './home'; //home.js 파일 function App() { return ( <BrowserRouter> <div> <div> <Link to="/">Home</Link> </div> <Routes> <Route path="/" element={<Home />} /> </Routes> </div> </BrowserRouter> ) } export default App;
📚 추가 학습
❕ History API : 콘솔에서 history.go(-1) 은 navigate(-1) 과 같이 바로 이전 페이지로 돌아감.
❕ <a> 태그와 <Link> 태그의 차이점은? : <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있음
❕ export, export default 의 차이점 : default 만 가져옴.
🔸 export -> import {export를 해오는 정확한 변수명} 를 하면 됨
🔸 export default -> 변수명은 상관없이 import 해올 수 있음
