상세 컨텐츠

본문 제목

REACT useConfirm

Web/REACT

by cepiloth 2021. 10. 25. 14:38

본문

728x90
반응형

useConfirm 은 훅은 사용하지 않는다. 

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

import "./styles.css";

const useConfirm = (message = "", onConfirm, onCancel) => {
  if (onConfirm && typeof onConfirm !== "function") {
    return;
  }

  if (onCancel && typeof onCancel !== "function") {
    return;
  }

  const confirmAction = () => {
    if (confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  };
  return confirmAction;
};

function App() {
  const deleteWord = () => console.log("Deleting the world");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("are you sure", deleteWord, abort);
  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete the world</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);
728x90
반응형

'Web > REACT' 카테고리의 다른 글

REACT - useEffect  (0) 2021.11.03
REACT - useState  (0) 2021.11.03
REACT - HOOK 이란?  (0) 2021.10.31
REACT useClick, useHover  (0) 2021.10.25
REACT proxy 수동 설정 - CORS  (0) 2021.10.19

관련글 더보기

댓글 영역