이번 과제에서 SPA의 라우팅을 구현할 때 대표적으로 다음을 사용했습니다.

🐇 history API

history API는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭/프레임의 방문 기록을 조작 할 수 있는 방법을 제공합니다.

🥕 history.pushState()

history.pushState({data}, title, url)

세션 기록 스택에 상태를 추가하는 메소드입니다. 새로운 상태로 이동할 때 마다 popstate이벤트가 발생하고, 이 때 이벤트 객체의 state속성에는 해당 상태의 복제본이 담겨 있습니다.

🥕 history.state

history에 해당하는 state값을 나타냅니다. popstate 이벤트 트리거가 되지 않는 상태에서 state값을 볼 수 있는 방법입니다.

const currentState = history.state

위 currentState값은 pushState(), replaceState()를 사용하기 전 까지 null의 값을 가지게 됩니다.

🐇 router

history API를 활용하여 router를 사용하는 순서는 다음과 같습니다.

🥕 history.pushState(data, title, url) 실행

🥕 location의 pathname 확인

location의 pathname을 확인하는 방법은 다음과 같습니다.

let { pathname } = location;

🥕 pathname에 맞는 컴포넌트 확인

🥕 컴포넌트 생성 및 렌더

위 작업은 App.js에서 한번에 처리할 수 있으며, 기존 해설에서 확인할 수 있습니다.

필자는 따로 router.js를 추가하여 관리하였고, App.js에서는 그에 맞는 역할인 API요청, 컴포넌트 생성 및 렌더링, router관리를 진행했습니다.

🐇 window.popstate

window.popstate이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 활성화된 Entry가 history.pushState() 또는 history.replaceState()에 의해 생성되면, popstate이벤트의 state속성은 historyEntry의 state객체의 복사본을 가지게 됩니다.

단, history.pushState() 또는 history.replaceState()는 popstate이벤트를 발생시키지 않습니다.

popstate이벤트는 브라우저의 백 버튼이나, history.back()등을 통해서만 발생됩니다.

🥕 사용법

export default function App($app) {
	this.init = () => {
		...
	}
	...
	window.addEventListener("popstate", this.init);
}

this.init은 App.js의 컴포넌트 및 데이터 생성 함수입니다. popstate이벤트를 통해 뒤로가거나 앞으로 가는 경우, this.init이 발생합니다.