티스토리 뷰

React로 화면 구성을 하다보니, 싱글페이지로 결과물이 나오는 경우가 많아 브라우저의 back, forward 키에 대응을 해야하는 상황이 많아졌습니다. 


그래서 아주 간단히 ajax 환경에서의 브라우저 히스토리를 어떻게 다룰것인가에 관해 알아보겠습니다.




초기 1회만 웹서버로 html을 요청하고 이후 페이지 렌더링은 ajax를 통해서만 진행해야하는 상황입니다.


페이지 상에서 제공되는 메뉴로 네비게이션 할때는 큰 문제가 발생하지 않으나, 브라우저가 제공하는 back, forward를 클릭하면 페이지 전체가 이동됩니다. 


아래와 같은 상황이 발생하는거죠 


1. http://naver.com 에서 http://singlepaage.com 으로 진입

2. singlepage.com에서 신나게 네비게이션 하며, 컨텐츠 감상

3. 엉겹결에 back키 클릭 

4. http://naver.com 로 복귀..


상당히 불쾌한 경험이 아닐수 없습니다. 


ajax환경으로 컨텐츠 로딩을 하더라도 위의 상황을 막을수 없을까요? 

물론 있습니다.


history 객체의 pushState를 통해서 말이죠 ( replaceState는 현재 포스팅에서 별도로 다루지 않겠습니다 ) 


단순하게 history 상의 항목, 기록등을 추가할수 있는 함수입니다.


pushState는 3가지 파마리터를 받습니다.


1. state object

2. title

3. url 


2,3은 아주 직관적이기 때문에 넘어가고, 1. state object 에 관해 간단히 알아보겠습니다. 


아주 단순하게 생각하면 history에 상태값을 기록하기 위한 용도라고 보시면 될것 같습니다.


window의 popState라는 이벤트가 있습니다. 해당 이벤트는 pushState나 replaceState에 의해 트리거 되는것이 아니고 브라우저의 back, forward에 트리거 됩니다. 해당 이벤트가 발생하면 event 객체가 파라미터로 전달되는데 이때 event.state 속성으로 pushState시에 전달하였던 위의 값이 전달됩니다. 


다시 말하면 pushState로 상태를 저장하고, 브라우저의 back, forward시에 유연하게 대처할수 있게끔 도와주는 파라미터 정도로 생각하면 될것 같습니다. 














댓글
댓글쓰기 폼