npm run start
이 명령어로 리액트 앱을 시작할 수 있습니다.
start말고 다른 명령어도 아래 코드처럼 지정할 수 있습니다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},SPA(Single Page Application)이란?
현재 App.js파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용이 된다.
이게 어떠한 순서로 실행되고 있는지 확인해보자.
public.index.html
HTML 템플릿 파일입니다.
div 엘레멘트의 id를 root로 해놓았습니다.
<!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>
</html>
src/index.js
자바스크립트의 시작점입니다.
여기서 위에 root id를 가진 div엘리먼트를 잡아줍니다.
그래서 그 엘리먼트 안에서 화면을 꾸밀 수 있게 됩니다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();Single Page Application(SPA)
여기서 한가지 의문점이 생깁니다.
그것은 index.html템플릿이 하나면 한 개의 페이지를 만들 때는 괜찮은데 두 개 이상의 페이지를 만들 때는 어떤식으로 해야되나?
원래 a페이지를 만들면 a.html b페이지를 만들면 b.html 이런식으로 만들었다.
이와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application 입니다.
하지만 요즘에는 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다.
이 것을 Single Page Application(SPA)이라고 부릅니다.
SPA에서 화면 변경은 어떻게 일어나나요?
전통적인 웹 사이트는 a page에서 b page로 페이지 전환 할 때 a.html을 보여주다가 b.html을 보여주면 됐지만 index.html밖에 없는 SPA에서는 어떻게 페이지 전환(브라우징)을 해줄까요?
HTML5의 History API를 사용해서 가능하게 만듭니다.
자바스크립트 영역에서 History를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줍니다.
History API
History.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드, 브라우저의 뒤로가기를 누르는 것과 같은 효과를 낸다.
History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드, 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다.
History.go(): 특정한 세션 기록으로 이동하게 해주는 비동기 메서드, 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동한다.
History.pushState(): 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 javascript 객체를 저장하는 것이 가능하다.
History.replaceState(): 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.
