App.js 파일의 화면 적용 과정
// public/index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> //body 태그의 div 엘레멘트 id가 root로 설정되어있습니다.
</body>
</html>
위 코드는 public 폴더 내에 있는 index.html 파일 입니다. 하단 파란색 배경으로 표시 된 코드를 보면 body 태그의 div 엘레멘트 id가 root로 설정되어있습니다.
// src/index.js 파일
import React from 'react";
import ReactDOM from 'react-dom/client';
import'./index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementByld('root'));
root.render (
<React.StrictMode>
<App />
</React.StrictMode>
);
위 코드는 src 폴더 내에 있는 index.js 파일입니다. 파란색 배경 표시가 된 부분을 살펴보면 앞서 확인한 index.html 파일 내 root id를 가진 div 엘리먼트를 불러온 것을 확인할 수 있습니다. 이를 통해 html의 body를index.js 파일로 꾸밀 수 있게 되는 것 입니다.
그렇다면 앞서 살펴본 것 처럼 index.html템플릿이 한개인데 두 개 이상의 페이지를 만들려면 어떤식으로 만들어야 할까요? 이때 등장 하는 개념이 SPA(Single Page Application) 즉, 단일 페이지 어플리케이션 입니다.
SPA(Single Page Application)란?
SPA는 단일 페이지 애플리케이션(Single Page Application)으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미합니다. 사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있어서 널리 사용되고 있습니다.
SPA 사용이 주는 이점
- 빠른 사용자 경험 SPA는 초기 로딩 후에는 페이지를 다시 로드할 필요가 없으므로 사용자 경험이 더 빠르고 반응성이 뛰어납니다.
- 서버 부담 감소 SPA는 필요한 데이터만 요청하고 업데이트 하므로 서버 부하가 줄어듭니다. 전체 페이지를 새로 로드할 필요가 없기 때문에 서버에 대한 요청이 줄어듭니다.
- 뛰어난 사용자 경험 페이지 간 전환 없이 사용자 인터랙션을 지원하므로, 애플리케이션의 사용자 경험이 향상됩니다. 사용자는 자연스럽게 앱을 탐색하고 필요한 데이터를 받아오며, 이로 인해 사용자들의 만족도가 높아집니다.
SPA 에서의 화면 변경
React 는 라우팅(routing) 라이브러리인 React-Router-dom을 통해 SPA 을 실행합니다. 이러한 라우팅 라이브러리는 대부분 HTML 5의 History API 를 사용하여 라우팅을 합니다.
History API 란 브라우저가 관리하는 세션 히스토리(session history), 즉 페이지 방문 이력을 제어하기 위한 웹 표준 API 입니다.
| 기능 | 설명 |
|---|---|
| History.back() | 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 냅니다. |
| History.forward() | 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 냅니다. |
| History.go() | 특정한 세션 기록으로 이동하게 해주는 비동기 메서드. History.go(1) ⇒ 바로 앞 페이지로 이동. History.go(-1) ⇒ 바로 뒤 페이지로 이동. |
| History.pushState() | 주어진 데이터를 세션 기록 스택에 넣습니다. 직렬화 가능한 모든 JavaScript객체를 저장하는 것이 가능합니다. |
| History.replaceState() | 최근 세션 기록 스택의 내용을 주어진 데이터로 교체합니다. |
