• public/index.html
• src/index.js
• Single Page Application(SPA)
  • SPA 에서는 index.html 파일 하나만 가지고 어떻게 화면 변경을 할까?

App.js 부분을 변경하면 변경한 부분이 화면에 적용되는데, 어떤 방식으로 실행되는지 알아본다.

public/index.html

HTML 템플릿 파일, div 엘리먼트의 id를 root로 설정

src/index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

자바스크립트 시작점으로, 자바스크립트 선택자를 통해서 root라는 id를 가지고 있는 엘리먼트를 선택하고 그 엘리먼트 안에서 화면을 꾸밀 수 있게 한다.

Single Page Application(SPA)

원래 2개 이상의 페이지를 만들 때는 각각 a.html, b.html 두 개의 파일을 가지고 화면을 구성하는 것이 일반적이었고 이를 Multi Page Application 이라고 한다. 하지만 요즘에는 하나의 템플릿 페이지를 가지고 동적으로 화면을 바꿔가면서 표현하도록 페이지를 구성하고 이것을 SPA Single Page Application 이라고 한다.

SPA 에서는 index.html 파일 하나만 가지고 어떻게 화면 변경을 할까?

하나의 파일에서 페이지 전환(브라우징)을 구현하기 위해서는 HTML 5의 History API를 사용한다.

• history.back()
• history.forward()
• history.pushState()
• history.replaceState()

history API document