Next 뒤로가기 이벤트 감지 - next dwilogagi ibenteu gamji

만약에 A 컴포넌트에 name 상태값이 있다고 가정하자

사용자가 A 컴포넌트의 name 상태값을 수정하였으나 실수로 브라우저 뒤로가기를 누르면 A 컴포넌트는 언마운트되고 수정했던 name 상태값은 유실된다.

이런 경우를 방지하기 위해 브라우저 뒤로가기 발생 시 '정말 뒤로 가겠습니까?'와 같이 사용자에게 한 번 더 확인을 요구하는 confirm 창을 띄울 수 있다.

history에서는 block으로 push/pop을 제어하여 이를 처리할 수 있도록 한다.

다음은 상태값이 변경되어 isBlocking이 true, action이 'POP'일 때 confirm창을 띄우는 예시이다.

참고

React Router v5.2 - Blocking route change with createBrowserHistory and history.block

(React) react-router history.block 적용해보기 - Prevents navigation

'Today I Learn > 이슈 해결' 카테고리의 다른 글

# 개요

같은 page에서 다른 컴포넌트로 router 이동 시 history가 쌓이지 않기 때문에 뒤로가기 버튼을 누르면 이전 화면이 뜨지 않고 이전전 page 화면이 뜨게 됩니다.

( A (page) -> B (page) -> C (component)에서 뒤로가기 클릭시 B에서 C로 이동할때는 브라우저 history를 쌓지 않았기 때문에 A로 이동됨 )

위와 같은 상황에서 원하는 방법으로 뒤로가기 router를 만들려면 다른 page 컴포넌트를 만들어서 브라우저 history를 쌓아야만 하는데, 이럴 경우 너무 많은 page 컴포넌트를 생성해야한다는 단점이 있습니다.

( A (page) -> B (page) -> C (page) 이동시 history가 쌓이지만 B와 C는 연관되어 있는 흐름이라면 또 다른 page를 생성하는 것은 옳지 않은 방법이라고 생각함 )

그래서 이번 포스팅에서는 같은 page에서 컴포넌트 이동으로 브라우저 history를 쌓아, 사용자가 뒤로가기 버튼을 누르면 바로 이전전 페이지로 가지 않고, 이전 페이지로 가는 방법에 대해 알아보겠습니다!

( A (page) -> B (page) -> C (component) B에서 C로 이동할때도 history를 쌓도록 하는 방법! )

# 설계

먼저 알아야할 지식으로 쿼리 스트링입니다. 대부분 아실것이라 생각하고 넘어가겠습니다.

두번째는 쿼리 스트링으로 컴포넌트를 이동하면 브라우저 history가 축적된다는 점입니다. 이 특징을 이용하여 컴포넌트간 이동에서도 history를 쌓아보겠습니다!

바로 예시 코드로 살펴보겠습니다~!!

# 예시 코드

# page 컴포넌트

해당 페이지에 들어오면 먼저 router에 쿼리스트링으로 page가 있는지 찾습니다.

page가 없다면 바로 인트로 컴포넌트를 랜더링 합니다.

page가 있다면 해당하는 컴포넌트로 연결해줍니다.

# 일반 컴포넌트

• router 이동으로 history를 쌓았기 때문에 다른 컴포넌트로 이동 후, 뒤로가기 클릭시 Intro 컴포넌트로 redirect됩니다.

Last Updated: 3/24/2021, 8:55:12 PM

리액트 페이지 뒤로가기 제어

By 개발하는 봉구

ReactJS

2022. 6. 16. 13:57

브라우저에 있는 뒤로 가기를 실행했을 때 정말 해당 페이지를 떠날 것인지 Confirm 모달을 통해 True일 때만 페이지를 벗어날 수 있게 해야했다.

과거에도 이런 비슷한 작업을 한 적이 있고 제어할 수 없다 라는 결론이 나왔었는데 .. 기억의 오류였다.

과거 경험한것은 브라우저 종료를 제어할 수 있는가에 대한 것이었다.

먼저 React에서는 react router dom의 useHistory의 객체를 통해 해당 액션이 push인지 pop인지를 구분하고 컨트롤 할 수 있다.

하지만 내가 사용하는 react router dom의 버전은 V6 버전이였고, history객체는 사라지고 navigate로 대체되었다.

navigate에서는 해당 기능이 없었고 결국 다른 방법을 사용해야했다.

const handleEvent = () => {
   history.pushState(null, '', location.href)
   modal.on()
}

useEffect(() => {
    history.pushState(null, '', location.href)
    window.addEventListener('popstate', handleEvent)
    return () => {
      window.removeEventListener('popstate', handleEvent)
    }
  }, [])

history.pushState는 브라우저의 세션 기록 스택에 상태를 추가합니다.

ex) 페이지1 -> 페이지2(1)-> 페이지2(2)

페이지 이동 없이 URL만 변경하고 브라우저는 다른것을 로딩하지 않는다.

하지만 이 방법도 완벽하게 컨트롤하는것은 불가능하니 개발하는 서비스가 어느 환경에서 작동하는지 잘 파악하여 사용해야 합니다.

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

History.pushState() - Web API | MDN

HTML 문서에서, history.pushState() 메서드는 브라우저의 세션 기록 스택에 상태를 추가합니다.

developer.mozilla.org

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

popstate - Web API | MDN

Window 인터페이스의 popstate 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서

developer.mozilla.org

https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7