[리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - usePreventLeave

노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다.

nomadcoders.co/

 

[예제 코드]

 

import { StrictMode, useEffect } from "react";
import ReactDOM from "react-dom";

const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };
  const enablePrevent = () => window.addEventListener("beforeunload", listener);
  const disablePrevent = () =>
    window.removeEventListener("beforeunload", listener);
  return { enablePrevent, disablePrevent };
};

const App = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

728x90

 

 

[강의 설명]

 

usePreventLeave는 hooks를 사용하는 것을 전혀 요구하지 않는다.

enablePrevent는 API에 뭔가를 보냈고 사람들이 닫지 않기를 바란다면, 이걸 보호할 수 있게 활성화시키는 것이다.

그런데 API가 응답해서 괜찮은 상태라면 이걸 신경쓰지 않아도 되는 것이다.

 

Protect버튼을 클릭하면 enablePrevent가 실행되서 beforeunload 이벤트 리스너가 생성되어 listener가 실행되 화면을 떠나겠냐고 물어보는 창이 뜨게된다.

반대로 Unprotect버튼을 클릭하면 disablePrevent가 실행되서 beforeunload 이벤트 리스너가 삭제되고 화면을 떠나겠냐고 물어보는 창이 뜨지 않게된다.