[Javascript] history.pushState()

하이브리드로 만든 앱에 뒤로가기 버튼 터치 시 팝업을 닫아줘야했다. 

 

방법을 찾다보니 만난게 history.pushState()

 

// html5에 새로 추가된 url 변경 메소드

history.pushState(상태, unused, url(optional))

 

네이티브에서 뒤로가기 시 이벤트를 해야해서
사용자의 히스토리가 바뀔 때 실행되는 이벤트 popstate랑 사용했다.

 

popstate 이벤트는 뒤로가기 등 history 이벤트가 발생할 때 동작하는 액션이다. 

 

두 함수를 활용해서 history.pushState때는 제자리에 머무르도록 하고, popState이벤트에 뒤로가기 발생 시 실행할 액션을 넣어주었다.

 

  const preventGoBack = () => {
    closeConfirmDialog()
    navigate('/pms', { replace: true })
  }

  useEffect(() => {
    history.pushState(null, '', location.href)
    window.addEventListener('popstate', preventGoBack)

    return () => {
      window.removeEventListener('popstate', preventGoBack)
    }
  }, [])

 

 

만들어진 함수를 gpt한테 설명해달라고 했다 :) 요즘 코드 짜고나면 gpt한테 코드리뷰를 자주 부탁하고있다.

 

이 코드는 React의 useEffect 훅을 사용하여 페이지에 접근 시 브라우저의 뒤로가기 버튼을 막는 역할을 하는 것으로 보입니다. 코드를 간략하게 설명하겠습니다.

 

1. preventGoBack 함수: 이 함수는 뒤로가기를 막고, closeConfirmDialog()를 호출한 후에 /pms 경로로 이동하는 역할을 합니다.
2. useEffect 훅: 이 훅은 컴포넌트가 마운트될 때 한 번 실행되고, 뒷정리(cleanup) 함수를 통해 컴포넌트가 언마운트될 때 실행됩니다.
   • history.pushState(null, '', location.href): 이 부분은 현재 페이지의 상태를 변경하여 브라우저 히스토리에 새 항목을 추가합니다. 이렇게 함으로써 사용자가 뒤로가기 버튼을 눌러도 실제로는 페이지가 변하지 않습니다. 이것이 뒤로가기를 막는 핵심 부분입니다.
   • window.addEventListener('popstate', preventGoBack): 뒤로가기 이벤트(popstate)가 발생할 때 preventGoBack 함수를 실행하도록 이벤트 리스너를 등록합니다.
3. 뒷정리(cleanup) 함수: 컴포넌트가 언마운트될 때, 즉 페이지를 벗어날 때 실행되는 함수입니다. 여기서는 window.removeEventListener를 사용하여 이전에 등록한 이벤트 리스너를 제거합니다. 이것이 중요한 이유는 컴포넌트가 언마운트될 때 리소스 누수를 방지하기 위해서입니다.

이 코드의 목적은 사용자가 페이지를 떠날 때(뒤로가기 버튼을 누를 때) 특정 작업을 수행하고자 하는 것으로 보입니다. 페이지를 벗어날 때 추가적인 동작을 정의할 때 유용한 패턴 중 하나입니다.

 

 

항상 새롭게 배울게 생긴다.

 

 

 

참고

- https://developer.mozilla.org/ko/docs/Web/API/Window/popstate_event

- https://developer.mozilla.org/ko/docs/Web/API/History/pushState

- https://velog.io/@function_dh/HTML5-history-API-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9D%B4%EB%8F%99