[ React ] Single Page Application (SPA)

Single Page Application (SPA)

전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것. 

결국 index.html 은 하나만 존재한다.

자바스크립트 영역에서 HTML5의 History API를 이용하여 현제 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다.

리엑트에서는 React-Router-Dom 이  History API를 사용한다.

 

History API 명령어	기능
History.back()	세션 기록의 뒤 페이지로 이동하는 비동기 메서드 (= 브라우저의 뒤로가기 기능)
History.forward()	세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드
History.go()	특정한 세션 기록으로 이동하게 해주는 비동기 메서드 ( 1 을 넣어 호출 시 앞페이지, -1 뒷페이지 이동)
History.pushState()	주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 javascript 객체를 저장한느 것이 가능하다.
History.replaceState()	최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.