[History] SPA에서 URL을 업데이트하는 효율적인 방법

안녕하세요

 

이번 포스팅에서는 History API에 대해 알아보겠습니다.

 

 

 

일반적으로는 주소에 따라 데이터를 띄울때 라우팅을 연결하는 것이 기본적입니다.

 

특정 URL로 접근하였을 때 로드될 내용을 잘 연결해 놓는다면 URL에 따른 적절한 내용을 로드할 수 있겠죠.

 

그렇기 때문에 우리는 보통 이러한 방법들을 이용하여 URL을 업데이트하고 페이지를 이동합니다.

 

1. window.location.href=""

2. form action="/"

3. server에서 리다이렉트 시켜주기

...

 

 

 

하지만 SPA에서는 우리가 자주 사용하는 URL 이동 방법들을 사용하기 적절하지 않습니다.

 

Single Page라는 특성상 데이터를 페이지가 올려져 있을 때도 비동기적으로 로드하기 때문에 페이지 새로고침이 일어나면 맨 처음으로 돌아가게 되기 때문입니다.

 

따라서 SPA에서 URL을 업데이트 하면서 페이지가 또 로드되면 맨 처음 페이지가 로드되었을 때 일어났던 일련의 작업들이 다시 실행될 것입니다.

(사실 Single Page Application이라는 이름 그대로 애초에 다른 페이지를 로드한다는 것 자체가 기본 성격에 맞지 않습니다.)

 

 

그렇기 때문에 SPA에서는 History API를 이용하여 URL을 업데이트하는 방법을 많이 사용합니다.

 

 

History는 자바스크립트 내장 객체로

 

(SPA에서는 많이 사용하지 않겠지만) 앞으로 가기, 뒤로 가기, URL 업데이트 등의 브라우저 기능을 제공합니다.

 

이때 History의 replaceState, pushState를 이용하여 URL을 업데이트 할 수 있습니다.

 

 

1) pushState

 

history.pushState({ data: '반갑습니다' }, 'title: index', '/index');

pushState를 사용하면 state 객체에 새로운 상태를 추가할 수 있습니다.

 

첫 번째 매개변수를 이용하면 state를 업데이트하면서 데이터를 넘겨줄 수 있습니다.

 

두 번째 매개변수에는 브라우저에 업데이트해줄 title을 넣어줄 수 있는데요. 원하지 않는다면 null을 넣어 변경하지 않게 할 수 있습니다.

 

세 번째에는 변경하고자 하는 URL을 넣어주면 되겠습니다.

 

다음 코드를 적용하면 '새로고침이 없이' /index로 URL이 업데이트됩니다. 

 

 

2) replaceState

history.replaceState({ data: '반갑습니다' }, 'title: index', '/index');

replaceState도 pushState와 사용 방법은 똑같습니다.

 

하지만 둘의 차이점은 pushState는 새로운 상태 객체를 집어넣는 것이고, replaceState는 현재 상태 객체를 변경하는 것입니다.

 

따라서 어떤 것을 사용하느냐에 따라 브라우저에서의 동작이 달라지게 됩니다.

 

 

 

예를 들면 pushState를 이용하면 그후에 뒤로가기를 눌른다면 업데이트 전 원래 URL로 (원래 상태 객체로) 돌아오지만,

 

replaceState를 이용하면 아예 이전 상태, 즉 replaceState를 사용하기 전 URL로 돌아가는 것이 아니라 아예 이전 상태로 돌아가게 됩니다.

 

따라서 페이지의 성격에 따라 각자 다른 메소드를 적용해 주면 SPA에서도 브라우저 내 URL 동작을 직접 조절할 수 있습니다.