[JS] Pushstate 페이지 갱신 없이 페이지 전환

현재 페이지 주소창 url변경
history.pushstate(state, title, url)

 

 

history.pushstate( state, title, url )

• 현재의 주소창의 url을 다른 것으로 변경하고자 할때 페이지는 그대로 유지하고 싶다면?
• history객체의 pushstate()를 사용하는 방법이 있다.
• pushstate()는 현재의 주소를 다른 것으로 변경하면서 페이지는 그대로 유지해주기 때문에 페이지가 전환, 갱신되는 것을 방지하면서 동시에 주소창의 url이 변경된다.
• 장점은 페이지 주소만 변경하는 것이 아니라 url주소를 바꾸면서 동시에 데이터(state)를 전달하거나 타이틀 변경도 가능하다.

 

 

 

1. url 변경

데이터(state), 타이틀(title)이 없다면 아래와 같이 간단하게 주소만 변경 가능하다.

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

const url = '/test';
history.pushstate( '', '', url );

 

 

 

 

2. 데이터 전달하는 state 방법

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

const state = { sitename: 'webPage' };
history.pushState( state, '', '/test' );


history.state;
//출력 결과
// 주소는 '/test'로 변경되면서 동시에 전달된 state를 가져올 수 있다.
{ sitename: 'webPage' };