[React Hooks] useConfirm, preventLeave, useBeforeLeave

useConfirm

- 사용자가 무언가를 하기전에 확인하는 건데 

예를 들면 사용자가 버튼을 클릭하는 작업을 하면 이벤트를 실행하기 전에 메세지를 보여주고 싶을 때 사용한다.

 

useConfirm만 구현한 코드

- 확인을 누르면 delete, 취소를 누르면 abort가 콘솔에 출력된다.

import "./styles.css";
import React, { useState, useEffect, useRef } from "react";

const useConfirm = (message = "", callback, rejection) => {
  if (typeof callback !== "function") {
    return;
  }
  const confirmAction = () => {
    if (confirm(message)) {
      callback();
    } else{
      rejection();
    }
  };
  return confirmAction;
};

export default function App() {
  const deleteWorld = () => console.log("deleting");
  const abort = () => console.log("aborted");
  const confirmDelete = useConfirm("are you sure", deleteWorld, abort);
  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete the world</button>
    </div>
  );
}

 

 

preventLeave

- 변경사항이 저장되지 않을 수 있습니다. 같이 나오는 거

import "./styles.css";
import React, { useState, useEffect, useRef } from "react";

const usePreventLeave = () => {
  //API가 응답한 것에 따라 저장되었는지, 아닌지 등을 확인
  // 닫아도 됩니까?
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };
  const enablePrevent = () => window.addEventListener("beforeunload", listener);
  const disablePrevent = () =>
    window.removeEventListener("beforeunload", listener);
  return { enablePrevent, disablePrevent };
};

// protect를 누르고 창을 끄려고하면 알림창이 뜬다.
export default function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>
    </div>
  );
}

 

 

 

useBeforeLeave

- 일단 아래코드는 웹페이지를 벗어났을 때 leaving을 콘솔에 출력한다.

import "./styles.css";
import React, { useState, useEffect, useRef } from "react";

const useBeforeLeave=(onBefore) =>{
  if(typeof onBefore !== "function"){
    return;
  }
  const handle = ()=>{
    console.log("leaving");
  };
  useEffect(()=>{
    document.addEventListener("mouseleave", handle);
    return () =>{
      document.removeEventListener("mouseleave", handle);
    }
  }, []);
};

export default function App() {
  const begForLife = () => console.log("please dont leave");
  useBeforeLeave(begForLife);
  return(
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

 

 

이렇게 clientY로 마우스가 위로 갈 때만 동작하게 할 수도 있다.

import "./styles.css";
import React, { useState, useEffect, useRef } from "react";

const useBeforeLeave=(onBefore) =>{
  if(typeof onBefore !== "function"){
    return;
  }
  const handle = event =>{
    const {clientY} = event;
    if(clientY <= 0) {
      onBefore();
    }

  };
  useEffect(()=>{
    document.addEventListener("mouseleave", handle);
    return () =>{
      document.removeEventListener("mouseleave", handle);
    }
  }, []);
};

export default function App() {
  const begForLife = () => console.log("please dont leave");
  useBeforeLeave(begForLife);
  return(
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}