[react] useConfirm

사용자가 어떤 동작을 하려고 할때 확인창을 띄워 한 번 더 물은 뒤 동작되게 하는 함수

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

function App() {
  const useConfirm = (message = "", onConfirm, onCancel) => {
    if(typeof onConfirm !== "function"){
      return;
    } // onConfirm 함수가 아니라면 종료
    const confirmAction = () =>{
      if(confirm(message)){
        onConfirm();
        // message가 있으면 onConfirm 실행
      } else{
        onCancel();
        // 아니라면 onCancel 실행
      }
    }
    return confirmAction;
    // 최종적으론 confirmAction이 리턴됨
  }

  const deleteWorld = () => console.log('삭제했습니다.');
  const abort = () => console.log('취소되었습니다.');
  const confirmDelete = useConfirm('삭제하겠습니까?', deleteWorld, abort);
  return (
    <div className="App">
      <button onClick= {confirmDelete}>Delete World</button>
    </div>
  );
}

export default App;