history.pushState

1. history.pushState

• 페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용한다.
• SPA 방식으로 만들어진 사이트는 새로고침이 일어나지 않고 내용을 바꿀 수 있지만,
  URL은 바뀌지 않기 때문에 History API의 pushState를 사용한다.

2. 구문

pushState(state, title)
pushState(state, title, url)

• State - 브라우저 이동 시 넘겨줄 데이터

  • pushState()에 의해 생성되어 새로운 기록 항목과 관련된 javascript 객체이다.
  • 사용자가 새로운 state로 이동할 때마다 popstate 이벤트가 발생되고,
    이벤트 state 속성은 기록 항목의 state 객체 복사본을 포함한다.
  • 넣을 값이 없으면 null을 사용한다.

• Title - 변경할 브라우저 타이틀

  • 빈 문자열을 전달하는 것이 나중에 메서드가 변경될 경우에 안전하다.
  • 넣을 값이 없으면 null을 사용한다.

• URL - 변경할 브라우저 주소

  • 새로 불러 올 url이며, pushState() 호출 후에는 이 url을 로드하지 않지만,
    브라우저를 새로고침 할 경우 다시 url을 로드할 수 있다.
  • 절대 경로일 필요는 없고, 상대 경로인 경우 현재 url을 기준으로 지정할 수 있다.
    (다만, 새로운 url과 현재 url이 같은 출처여야 한다.)

3. Etc

• pushState로 주소를 바꾼 후 뒤로가기를 하면 popState라는 이벤트가 발생한다.
• 검색 페이지나 페이지네이션을 가진 페이지에서 많이 사용된다.
  검색 조건이나 페이지 전환이 비동기식으로 이루어질 때
  이를 반영하기 위해 페이지 주소를 함께 변경한다.
• pushState와 더불어 popState를 활용하면 SPA의 페이지 전환을 구현할 수 있다고 한다.