TIL : history

💡 key point

• history.replace('/path')
• window 브라우저와 react-router-dom의 history, location
• onpopstate? bfc(backforward cache)?

✧ 로그인 후 뒤로가기 막기 (with React, javascript..)

push는 히스토리 스택을 쌓는다, 'stack'이므로 방금 들어온 것이 먼저 나갈 수 있다.
replace는 가장 최근의 스택을 갈아치우면서 그 path로 이동한다.

만약 메인페이지에서 로그인페이지로 이동하고, 로그인 시 마이페이지로 리다이렉트되도록 라우팅 구조를 설계했다면,
로그인 완료(성공) 후 랜딩한 마이페이지에서 뒤로가면 로그인페이지가 나온다, 그럼 또 다시 마이페이지로 리다이렉트된다,
이러한 동일한 페이지의 연속적인 중복 노출 현상을 막기 위해 history.replace를 쓸 수 있다.
(물론 라우팅 구조가 복잡한 큰 규모의 앱이라면 단순한 문제가 아니다)

history.replace('/path')

history.replace({
  pathname: '/path',
  state: {
    ..location.state,
    redirect: '/somewhere'
    },
})

그리고 소셜로그인인 경우 oauth나 bridge 페이지가 스택에 쌓여 히스토리 스택을 replace처리하는 데 한계가 있다.
+서치하던 중 react-router-dom 의 버전 6 이상의 경우 navigate 기능이 추가되었다고 해서 좀 더 찾아보는 중. 현재 개발 중인 앱은 버전 5라서 적용해보지 못했다.
시중 다양한 서비스를 봐도 로그인 후 뒤로가기를 하면 로그인 화면이 노출되는 경우는 많은 것 같다. 사용자 경험에 있어 크리티컬하지 않다고 판단되어서일 수 도.

*아이폰의 경우 스와이프 시 onpopstate 이벤트가 일어나지 않고 이전 상태의 뷰만 보이는 경우가 있는 걸 발견했다. 웹뷰 앱임에도 .. ? 이건 ios를 공부해봐야할 것 같음.

✧ 뒤로가기 액션으로 모달 창'만' 닫기

참고

• replaceState, pushState 는 주소만 바꾸어주고 이벤트는 일어나지 않는다.
• 🔗 웹에서 뒤로가기를 막고 모달을 클로즈 처리하기 위한 방법