리액트 뒤로가기 이벤트 감지 - liaegteu 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 > 이슈 해결' 카테고리의 다른 글

The Event property returnValue indicates whether the default action for this event has been prevented or not.

developer.mozilla.org

또한 useEffect에서 위 코드와 같이 콜백함수로 감싸주어야,

보다 더 명확한 동작이 이루어진다고 한다

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

A JavaScript library for building user interfaces

ko.reactjs.org

같은 방법으로, 뒤로 가기 동작도 막아보도록 하자

뒤로 가기 막기

뒤로 가기를 할 때에는 popstate 이벤트가 발생한다

이는 사용자가 세션 기록 탐색을 하여, 현재 활성화된 기록 항목이 바뀔 때 발생한다

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

popstate - Web API | MDN

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

선생님 안녕하세요
웹에서 뒤로가기 시에 이벤트 감지해서 나갈꺼냐고 물어보고 싶은데 방법이 있을까요?
구글링해서 아래와 같이 했는데 다른 환경(안드로이드,데스크탑 등)에서는 작동을 하는데 아이폰 사파리에서는 안먹혀서.. 헤매고 있습니다. 도와주세요 ㅠㅠ

  useEffect(() => {
    const preventGoBack = () => {
      if (confirm('페이지를 나가시겠습니까?')) {
        history.go(-1);
      } else {
        history.pushState(null, '', location.href);
      }
    };

    history.pushState(null, '', location.href);
    window.addEventListener('popstate', preventGoBack);

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

• 이 게시글은 에 의해 3 months 전에 수정됐습니다.

React router v5에서는 useHistory 의 return value인 history의 history.listen() 으로 뒤로가기 이벤트를 탐지하는 예제가 많이 나온다. 그러나 최근에 React router가 v6 업데이트 되면서 useHistory가 없어지며 history.listen을 사용하시던 분들과 뒤로가기 이벤트 탐지를 검색하시던 분들이 어려움을 겪었을 것이다. 필자 또한 이 방법을 찾느라 + 그냥 코드를 잘못 적었는데 몰라서 뒤로가기 이벤트 탐지 기능을 구현하는 데 애를 먹었다.

history.ts

import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

먼저 react-router에 history가 없어졌으니 history 라이브러리에서 가져오자. 패키지 매니저에 따라 yarn add history나

import { history } from "some/directory/history"

useEffect(() => {
    const listenBackEvent = () => {
      // 뒤로가기 할 때 수행할 동작을 적는다
    };

    const unlistenHistoryEvent = history.listen(({ action }) => {
      if (action === "POP") {
        listenBackEvent();
      }
    });

    return unlistenHistoryEvent;
  }, [
  // effect에서 사용하는 state를 추가
]);

import { history } from "some/directory/history"

useEffect(() => {
    const listenBackEvent = () => {
      // 뒤로가기 할 때 수행할 동작을 적는다
    };

    const unlistenHistoryEvent = history.listen(({ action }) => {
      if (action === "POP") {
        listenBackEvent();
      }
    });

    return unlistenHistoryEvent;
  }, [
  // effect에서 사용하는 state를 추가
]);

page.tsx

import { history } from "some/directory/history"

useEffect(() => {
    const listenBackEvent = () => {
      // 뒤로가기 할 때 수행할 동작을 적는다
    };

    const unlistenHistoryEvent = history.listen(({ action }) => {
      if (action === "POP") {
        listenBackEvent();
      }
    });

    return unlistenHistoryEvent;
  }, [
  // effect에서 사용하는 state를 추가
]);

그 다음은 아까 만들었던 history객체를 import만 하면 기존에 useHistory의 history를 사용하는 것과 똑같다. history의 update event를 listen하여 action이

import { history } from "some/directory/history"

useEffect(() => {
    const listenBackEvent = () => {
      // 뒤로가기 할 때 수행할 동작을 적는다
    };

    const unlistenHistoryEvent = history.listen(({ action }) => {
      if (action === "POP") {
        listenBackEvent();
      }
    });

    return unlistenHistoryEvent;
  }, [
  // effect에서 사용하는 state를 추가
]);

import { history } from "some/directory/history"

useEffect(() => {
    const listenBackEvent = () => {
      // 뒤로가기 할 때 수행할 동작을 적는다
    };

    const unlistenHistoryEvent = history.listen(({ action }) => {
      if (action === "POP") {
        listenBackEvent();
      }
    });

    return unlistenHistoryEvent;
  }, [
  // effect에서 사용하는 state를 추가
]);

import { history } from "some/directory/history"

useEffect(() => {
    const listenBackEvent = () => {
      // 뒤로가기 할 때 수행할 동작을 적는다
    };

    const unlistenHistoryEvent = history.listen(({ action }) => {
      if (action === "POP") {
        listenBackEvent();
      }
    });

    return unlistenHistoryEvent;
  }, [
  // effect에서 사용하는 state를 추가
]);

공유하기

게시글 관리

저작자표시

'React' 카테고리의 다른 글