[React/실전형 리액트 Hooks/노마드코더] #2.3 useConfirm & usePreventLeave

 

강의출처

 

https://youtu.be/4EjExMUGmqQ

 

 

 

 

---

 

 

 

useConfirm

 

 

useConfirm은 사용자가 무언가를 하기 전에 확인하는 것으로

사용자가 버튼을 클릭하는 작업을 하면 (이벤트 실행 전) 메시지를 보여준다.

 

아래 예제 코드를 살펴보자.

 

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

export const useConfirm = (message="", onConfirm, onCancel) => {
    if(!onConfirm || typeof onConfirm !== "function" ) {  //onConfirm이 존재하지 않거나 function이 아니라면 리턴
      return;
    }
    if(onCancel && typeof onCancel !== "function") {  //onCancel 존재하고 function이 아니라면 리턴
      return;
    }
    const confirmAction = () => {
      if(window.confirm(message)) {
        callback();
      } else {
        onCancel();
      }
    };
    return confirmAction;
  };

const App = () => {
  const deleteWorld = () => console.log("Deleting the world ...");
  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>
  )
};

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

 

 

useConfirm 함수는 message와 onConfirm 함수, onCancel 함수를 인자로 받아서,

확인이 필요한 액션을 실행하기 전에 메시지를 표시하고 사용자가 확인 버튼을 클릭했을 때는

콜백 함수를 실행하고 취소버튼을 클릭했을 때는 onCancel 함수를 실행하는 함수이다.

 

if(!onConfirm || typeof onConfirm !== "function" )에서 onConfirm이 존재하지 않거나 function이 아니라면 리턴한다.

if(onCancel && typeof onCancel !== "function")에서 onCancel 존재하고 function이 아니라면 리턴한다.

 

confirmAction 함수는 message와 onConfirm이 주어졌을 때,

window.confirm 메서드를 사용하여 message를 표시하고, 확인 버튼을 클릭한 경우 onConfirm을 실행한다.

취소 버튼을 클릭한 경우에는 onCancel을 실행한다.

 

그리고 useConfirm은 confirmAction 함수를 반환한다.

 

 

App 컴포넌트에서는 deleteWorld 함수와 useConfirm 훅을 사용하여 confirmDelete 함수를 생성한다.
confirmDelete 함수는 useConfirm에서 반환된 confirmAction 함수이다.

 

onClick 이벤트가 발생하면 confirmDelete 함수가 실행되고, useConfirm에서 생성된 confirmAction 함수가 실행된다.

 

따라서, "Are you sure?" 메시지가 표시되고 확인 버튼을 누르면

deleteWorld 함수가 실행되어 "Deleting the world ..." 문자열이 콘솔에 출력되고

반대로 취소 버튼을 누르면 'Aborted' 문자열이 출력된다.

 

 

 

 

---

 

 

실행결과

 

초기 실행창

 

 

버튼을 누르자 나타나는 confirm 창

 

 

확인을 누르자 나타나는 콘솔메시지

 

 

취소를 눌렀을 때 나타나는 콘솔메시지

 

 

 

---

 

 

usePreventLeave

 

 

이 훅은 React 함수형 컴포넌트에서 사용되며,

사용자가 현재 페이지를 벗어나기 전에 경고 메시지를 표시하려는 경우에 유용하다.

 

사용자가 현재 페이지에서 벗어나려고 할 때 window.onbeforeunload 이벤트를 이용하여 경고 메시지를 보여주고,

사용자가 페이지를 떠나기를 원하는 경우에는 아무런 조치도 취하지 않는다.

 

 

그러나 사용자가 페이지를 벗어나기를 취소하려는 경우,

경고 메시지가 표시되며, 사용자가 페이지를 떠나기를 중단할 것인지 여부를 물어본다.

 

 

아래 예제 코드를 살펴보면서 이해해 보자.

 

 

---

 

 

 

 

예제 코드

 

import React, { useState, useEffect, useRef } 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);

 

 

이 코드는 React Hooks를 사용하여 "beforeunload" 이벤트를 사용하여

창을 닫을 때 경고 메시지를 보여주는 기능을 만드는 예제이다.

 

usePreventLeave 함수는 enablePrevent와 disablePrevent 함수를 반환한다.

이 함수를 호출하면 beforeunload 이벤트가 활성화되어 창이 닫히기 전에 경고 메시지가 표시된다.

 

enablePrevent 함수는 beforeunload 이벤트를 등록하고, disablePrevent 함수는 beforeunload 이벤트를 제거한다.

 

App 컴포넌트는 usePreventLeave 훅에서 반환된 함수를 호출하는 두 개의 버튼을 렌더링 한다.

"Protect" 버튼은 enablePrevent 함수를 호출하고 "Unprotect" 버튼은 disablePrevent 함수를 호출한다.

 

이 예제는 beforeunload 이벤트를 사용하여 창을 닫을 때 경고 메시지를 보여주는 기능을 구현하는 방법을 보여준다.

이 기능은 사용자가 실수로 창을 닫을 때 데이터를 잃지 않도록 도와준다.

 

 

 

 

---

 

 

실행결과

 

Protect 버튼 클릭 후 창을 닫자 뜨는 창

 

 

 

 

다음 포스팅에서는 useBeforeLeave 훅을 만들어 보도록 하자 !