03. 단일 페이지 애플리케이션 SPA 만들기

전통적인 방식에서 

MPA는 클라이언트가 초기요청을 보내면 서버는 HTML을 보내고

페이지 전환을 요청하면 다시 서버에서 HTML을 보내서 Page Reload의 반복

 

단일 페이지 애플리케이션에서는

필요할때만 데이터를 요청해서 받아옴.

페이지 전환은 자체적인 라우팅 처리를 함.

 

SPA가 가능하기 위한 조건

1. 자바 스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다.

단 브라우저는 서버로 요청을 보내지 않아야함.

2. 브라우저의 뒤로가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다.

이때도 브라우저는 서버로 요청을 보내지 않아야함.

 브라우저는 자바스크립트에서 알려줘야함.

 

3. 위 조건을 만족시키는 브라우저API

-push State, replaceState함수 -> 자바스크립트가 페이지 전환을 하고 싶을때 브라우저에게 페이지 전환 이벤트를 알려주는 방법

-popstate이벤트 -> 브라우저에서 사용자가 브라우저 UI를 통해 페이지 전환을 하려할때 브라우저는 자바스크립트 popState이벤트를 통해서 전환을함.

 

별도의 라이브러리르 사용하지않고 SPA를 만들 수 있는데

React-router-dom 을 이용해서 SPA로 동작하는 웹사이트를 만들자.

코드분할을 하지않고 SPA를 작업을 하면 하나의 파일에 모든 코드가 모여있기 때문에

초기 요청때 너무 큰 사이즈의 자바스크립트가 내려오기 때문에 초기화면이 느려질 수 있음.

페이지 별로 코드 분할을 할 수 있는데 react-router-dom을 이용하면 페이지 단위로 코드 분할을 할 수 있다. 

 

React 

Link 와 Route

리액트 라우터를 쓸때 <a>태그 사용 하면 안됨.

Link컴포넌트는 브라우저의 주소만 바꿀뿐, 새로고침 하지 않는다.

 

리액트는 선언형 프로그래밍-> 추상화 단계가 높음 / 비지니스 로직에 더 집중할 수 있다는 장점이 있다.