history push와 replace의 차이
프로그래밍 부트캠프에서 마지막 프로젝트를 진행하면서 React와 React Router를 사용해 로그인과 라우팅을 담당했는데, 개발을 배우기 전에는 그냥 넘겼을 문제에 직면했다.
우선 history push와 replace의 차이를 설명하기 전에 왜 둘의 차이점을 공부하게 되었나를 먼저 말해보고 싶다
첫째는 로그인 이후 뒤로가기 문제다. 로그인 후 뒤로가기를 누르면 로그인 페이지가 나오지 않아야 된다고 생각해서 browser history를 조작해 보려고 했는데 어려운 부분이 있었다. 로그인 된 유저가 뒤로가기로 접근했을 때 로그인 이전 페이지로 보내주기는 어렵지 않았지만 그렇게 했을 경우에는 주소를 직접 치고 Mypage에 접근해 로그인을 하는 경우를 함께 고려 하기는 어려웠다.
그래서 결국 쿠팡과 11번가 같은 대형 e-commerce를 참고 해 봤는데 두 사이트 모두 뒤로가기를 누르면 로그인 페이지가 나오는 걸 보고 일단 UX가 이상한건 아닐 수 있다는 결론을 내렸고 로그인이 끊기지는 않기 때문에 프로젝트에서 위 부분은 배제하기로 했다.
이제 본론으로 들어와서 위 문제를 배제 하고의 문제점은 로그인 후 뒤로가기를 눌러 로그인페이지가 나왔는데 또 뒤로가기를 또 눌렀을 때 어떤 화면을 보여줄까였다. 이 때 필요한 개념이 history push와 replace였다
History push
1 번 페이지 Home 에서 특정 버튼을 클릭하여 2번 Items가 나오는 페이지로 들어오고 여기서 Login을 시도한다고 생각해 보자. 로그인 라우팅이 연결된 버튼에 history push를 사용한다면 browser history에 페이지 이동 기록이 쌓인다. 로그인이 성공하면 아래와 같이 push로 로그인 시도했던 페이지로 보내기 때문에
var pathname = ""if (this.props.location.state) {var {search} = this.props.location.state.frompathname = this.props.location.state.from.pathname} else {pathname = '/'}if (pathname === '/signup') {history.push('/')} else {search ? history.push(pathname + search) : history.push(pathname)}
Home > Items > Login > Items의 구조로 history가 쌓이게 된다.
그래서 유저가 처음 뒤로가기 버튼을 누르면 로그인 페이지가 보이고 그 후 로그인을 시도했던 Items가 또 보이고 이 후 홈으로 돌아가게 된다.
Replace
https://reacttraining.com/react-router/web/api/Link/replace-bool에 보면 Link 태그 내 replace 옵션을 볼 수 있다. “When true, clicking the link will replace the current entry in the history stack instead of adding a new one.” 라고 나와있다. MDN에도 “새로운 히스토리를 하나 생성하는 대신에 현재의 히스토리 엔트리를 변경합니다” 라고 나와있는데 새로운 엔트리를 만든다는 기준이 처음엔 잘 이해가 안갔지만 버튼 하나하나 눌러보면서 replace의 차이를 알 수 있었다.
Home > Items 에서 로그인을 시도할 경우 <Link to= “somewhere” replace={true}/>를 설정 해 주면 Items의 히스로리 위치가 Login으로 대체 된다.
즉, Home > Login > Items와 같은 구조로 History가 변경된다 그래서 유저는 뒤로가기를 누르면 로그인 페이지가 보이고 그 후 바로 홈 화면에 접근하게 된다.
마치며
History push와 replace를 활용하면 유저에게 어떤 페이지를 보여줄지 조작할 수 있다. 나의 경우는 처음엔 replace 방식으로 했다가 history push가 조금 더 상식적인 이동이지 않을까 싶어서 history push를 이용했다. 이상.
