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

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

nomadcoders.co/

 

[예제 코드]

 

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

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

  const confirmAction = () => {
    if (confirm(message)) {
      callback();
    } else {
      rejection();
    }
  };
  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);

728x90

 

[강의 설명]

 

useConfirm은 사용자가 무언가를 하기전에 확인하는건데, 사용자가 버튼을 클릭하는 작업을 하면 이벤트를 실행하기전에 메세지를 보여주기위해 사용하는 기능이다.

 

사용자가 Delete the world라는 버튼을 클릭하면 confirmDelete이 호출되고, confirmDelete은 useConfirm함수를 호출한다.

사용자가 confirm에서 확인을 클릭하면 callback함수 즉, deleteWorld를 호출해서 Deleting the world라는 값이 콘솔창에 찍히고, 취소버튼을 클릭할 경우에는 rejection, 즉, abort함수를 호출하므로 콘솔창에 Aborted라는 값이 찍히게 된다.