MPA(멀티 페이지 애플리케이션)와 SPA(단일 페이지 애플리케이션)
공통점
- 처음 페이지 로드시, 클라이언트 -> 서버로 요청해서 HTML파일 받아와야
차이점
MPA
- 페이지 이동시마다(전환요청시마다) 클라이언트->서버의 요청을 통해 받아온 HTML을 reload
SPA
- 페이지 이동시에 서버로의 요청을 필요X
- 페이지 전환은 자체적으로 Routing처리 가능
- 필요한 데이터 있을 시에만 서버에 데이터 요청
SPA 가능하려면
- 자바스크립트에서 브라우저에 페이지 전환 요청 보낼 수 있어야
- 브라우저는 서버에 페이지 전환 요청 보내서는 안된다.)
2.브라우저의 뒤로 가기 같은 사용자 요청에 대해 자바스크립트가 처리 가능해야 한다.
- 이 때도 브라우저는 서버로 요청을 보내서는 안된다.
페이지 이동 발생시,JS<->브라우저간의 이벤트 발생을 전달,단 어느쪽이건 서버로 페이지 이동 요청을 보내서는 안 된다.
위 조건을 만족시키는 브라우저 API
- JS가 브라우저에게 페이지 이동 알려주는 pushState
- 브라우저가 JS에게 페이지 이동 이벤트 발생 알려주는 popState가 존재한다
리액트에서는 어떻게 SPA를 이용할 것인가
- react-router-dom을 사용
- 많은 부가기능과 코드 spliting을 가능하게 해줌(페이지 별로 나눠서)
superfly