공부기록

단일 페이지 애플리케이션(SPA) 구현을 위한 조건 두 가지. 본문

JAVASCRIPT/REACT

단일 페이지 애플리케이션(SPA) 구현을 위한 조건 두 가지.

gracelove91 2019. 7. 31. 18:20
반응형

1. 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단, 브라우저는 서버로 요청을 보내지 않아야한다.

2. 브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다. 이때 또한 브라우저는 서버로 요청을 보내지 않아야한다.

브라우저에는 히스토리에 state를 저장하는 스택이 존재한다. (브라우저 api의 pushState, replaceState, popState)

    componentDidMount(){
          window.onpopstate = () => { ... };
    }
    onClick1 = () => window.history.pushState('v1', '', '/page1');
    onClick2 = () => window.history.pushState('v2', '', '/page2')l

replaceState? pushState와 거의 같지만, 스택에 state를 쌓지않고 가장 최신의 state를 대체한다.

이렇게 popState(이벤트), pushState(함수) replaceState(함수) 가 있으면 클라이언트에서 라우팅 처리가 되는 단일 페이지 앱을 만들 수 있다.

브라우저 api로 페이지라우팅 처리하려면 신경써야할 부분이 많다. 이럴 때는 react-router-dom을 이용해보자.

반응형