문제 상황

홈페이지에서 유저가 로그인을 하면, 로그인한 유저한테만 노출되는 컴포넌트가 뜨지 않았다. 새로고침을 해야지만 정상 노출이 되는 현상이 있어 이를 전역상태관리가 제대로 되지 않았다고 판단했다.

그런데 전역상태관리 문제가 아닌, 로그인 페이지에서 로그인시 페이지 이동이 일어나게 하는 location.replace() 메서드 때문이란 것을 깨달았다.

해결 방법

// 수정 전 메서드 - 웹 브라우저 히스토리 저장됨
window.location.replace('/')

// 수정 후 메서드 - 웹 브라우저 히스토리 저장 안 됨
location.href='/'

location.replace() 메서드에서 location.href으로 변경하였더니, 로그인 후 새로고침을 따로 하지 않아도 해당 컴포넌트가 정상노출 된 것을 확인하였다.

사용자 클릭 등의 사용자 반응에 의해 url을 이동하는 경우 location.href를 사용하는 것이 원칙이다.
웹 브라우저에 히스토리가 남기 때문에, 사용자 선택에 의해 이전 방법 url로 이동하거나 뒤로 가기를 할 수 있기 때문이다.

반면, 쇼핑몰 결제 프로세스나 중요 정보를 변경 후 다른 url로 이동하게 되는 경우 뒤로 가기로 해당 URL로 다시 접근하게 되는 것을 막을 필요가 있다.
이 경우, location.replace()를 이용해 정보나 값을 변경하는 페이지를 뒤로 가기로 접근할 수 없도록 막아야 한다.

• location.replace() : 뒤로 가기로 이전 페이지로 가는 것을 차단하거나, 방문 히스토리를 남기지 않아야 하는 경우에만 사용.

자바스크립트를 이용해 동적인 페이지 구성을 할 때는, 항상 사용자가 뒤로 가기를 눌러 이전 페이지로 되돌아올 경우에 대한 대비를 해야 함을 잊지 말자.