하나의 페이지로 만들어진 웹을 SPA라고 합니다.
SPA의 단점은 주소가 바뀌지 않는다는 것입니다. 초창기에는 주소 뒤에 # #!을 붙이고 뒤에 하위 주소를 넣었습니다. 따라서 해쉬뱅 대신 브라우저에서 제공하는 주소 API를 사용해 주소를 바꾸게 되었습니다.
주소 내역은 하나의 목록입니다, 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것입니다. 따라서 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 됩니다. 목록에 주소를 추가하기 위한 메소드가 HTML5에서 생겼습니다.
history.pushState()와 history.replaceState()입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>History API</title>
</head>
<body>
<div id="state"></div>
<button id="pushState">pushState</button>
<button id="replaceState">replaceState</button>
<script>
document.querySelector('#pushState').addEventListener('click', function () {
history.pushState({ data: 'pushpush' }, 'title을 pushState로', '/pushpush')
});
document.querySelector('#replaceState').addEventListener('click', function () {
history.replaceState({ data: 'replace' }, 'title을 replaceState로', '/replace');
});
window.addEventListener('popstate', function () {
console.log('popstate', history.state);
document.querySelector('#state').innerHTML = JSON.stringify(history.state);
});
</script>
</body>
</html>history.pushState({data: 'pushpush'}, 'title을 pushState로', '/pushpush')하도록 되어있습니다. 첫번쨰 인자는 바뀐 주소와 함꼐 저장할 데이터 객체이고, 두번쨰 인자는 바꿀 제목, 세 번째 인자는 바꿀 주소입니다.
주소와 함꼐 데이터도 저장할 수 있기 때문에 매우 유용합니다. 이 데이터에 바뀔 페이지의 정보들을 담아두고 클라이언트에서 정보를 활용해 새로운 페이지를 렌더링하면 됩니다. 정보는 history.state로 접근할 수 있습니다.
두 번째 인자는 제목인데 브라우저에서 아직 제목 바꾸는 것까지는 구현하지 않았습니다. 그냥 빈 문자열을 넣어 두는 정도로 하시면 됩니다.
세 번째 인자는 바뀔 주소입니다. 위의 예시에서는 /pushpush를 주었기 때문에 절대 경로로 처리가 되었습니다. 만약 pushpush나 ./pushpush로 줬다면 상대경로로 처리가 되어 주소가 localhost:5500/book/pushpush가 되었을 겁니다.
하지만 replaceState는 이전 주소를 없애고 바꿀 주소를 넘기는 것이기 때문에 더이상 전 주소에는 접근할 수가 없습니다.
또한 pushState와 replaceState로 주소를 바꾼 후, 뒤로가기나 앞으로가기를 했을 떄 발생하는 이벤트는 popstate인데 윈도우에 이벤트 리스너를 연결해 두면 뒤로가기나 앞으로가기를 눌렀을 때 이벤트가 발생합니다. pushState를 여러번 눌렀다가 뒤로가기를 해보면 #state에 history.state정보가 뜹니다.
History API, 별거 아닙니다. 다만 새로고침을 눌렀을 경우에는 없는 페이지라고 뜨기 때문에 이 부분은 서버사이드 렌더링으로 해결해야 합니다. SPA에서 주소를 자연스럽게 바꿀 수 있다는 것은 대단한 장점입니다. 물론 리액트 라우터나 앵귤러 라우터는 이를 이미 활용하고 있지만 내부 원리를 알았다는 것에 의의를 두면 됩니다.
'React > ReactJs' 카테고리의 다른 글
| React - koa FrameWork (0) | 2022.03.09 |
|---|---|
| 나만의 Webpack 개발환경 만들기 plugin ( React ) (0) | 2022.02.27 |
| React - ServerSideRendring (0) | 2022.02.22 |
| React - React.lazy & Suspense & Loadable Components (0) | 2022.02.22 |
| React - Redux MiddleWare >> redux-saga (0) | 2022.02.22 |