자바스크립트 history 객체 페이지 갱신 없이 페이지 전환, pushstate

자바스크립트를 사용하여 현재 페이지를 새로고침, 갱신하지 않으면서 다른 주소로 변경하는 방법을 알아봅니다.

# 자바스크립트 현재 페이지 주소창 url 변경하기

현재의 주소창의 url을 다른 것으로 변경하고자 합니다. 이때 페이지는 그대로 유지하고 싶다면 어떻게 할까요? 이 때 사용 가능한 방법이 바로 history 객체의 pushstate()를 사용하는 방법입니다.

history.pushstate(state, title, url)


pushstate()는 현재의 주소를 다른 것으로 변경하면서 페이지는 그대로 유지해주기 때문에 페이지가 전환, 갱신되는 것을 방지하면서 동시에 주소창의 url이 변경됩니다.

! 언제 필요할까요?

검색 페이지나 페이지네이션(pagination)을 가진 페이지에서 많이 사용됩니다. 즉 검색 조건이나 페이지 전환이 비동기식 ajax로 이루어질때 이를 반영하기 위해 페이지 주소를 함께 변경하는 것입니다. 페이지 주소를 변경해두면 만약 페이지를 리로드, 갱신하더라도 바뀐 주소나 쿼리 스트링 정보를 그대로 가져올 수 있기 때문이죠.

pushstate()의 장점은 페이지 주소만 변경하는 것이 아니라 url 주소를 바꾸면서 동시에 데이터(state)를 전달하거나 타이틀 변경도 가능하다는 점입니다.

• 데이터 state 값 전달 가능
• 페이지 타이틀 변경
  

만약 전달된 data를 확인하기 위해서는 history.state를 사용하면 접근이 가능합니다. 이 방법은 맨 아래에서 확인이 가능합니다.

! pushstate()로 url 변경하는 방법 및 예제

먼저 url 주소를 변경하는 방법을 알아봅니다. 데이터(state), 타이틀이 없다면 아래와 같이 간단하게 주소만 변경할 수 있습니다.

코드를 실행하면 /test로 현재 페이지가 변경된 것을 브라우저의 주소창에서 확인할 수 있습니다.

! 데이터 전달하는 state 방법 알아보기

데이터를 전달하기 위해서 state에 아래와 같이 입력 후 페이지를 변경해보려고 합니다.

주소는 '/test'로 변경되면서 동시에 전달된 state를 가져올 수 있습니다.


여기까지 자바스크립트의 history 객체 pushstate()를 사용하여 주소를 페이지 갱신, 리로드 없이 바꾸는 방법을 알아보았습니다.