콜백 함수, 즉시 실행 방지

react-confirm-alert

기존에 사용라던 라이브러리를 확장성을 위해서 custom hook으로 만들기 위해 컴포넌트로 빼버렸다.
하기처럼 작성할 경우 편집하기 버튼만 눌러도 확인을 누르기전에 즉시 실행됨

• src/View/Main.js (변경 전)

 const alertMSG = (num,e,idx,num2) => {
			setAlertDetail({
                ...alertDetail,
                title:"콜백문자 삭제안내",
                message:"해당 문자를 삭제하시겠습니까? \n삭제된 문자는 복구가 불가능합니다.",
                isChoose:true, 
                action:deleteCallbackCard(e,idx,num2),
                buttonId:'confirm_txt',
                overlayClassName:'overlay-custom-class-name'
            })
}

• src/hooks/useConfirm.js

import React, {useEffect, useState} from "react";
import { confirmAlert } from 'react-confirm-alert';

const useConfirm=(alertDetail,close)=> {

console.log(JSON.stringify(alertDetail))

    const onSubmitAction=()=>{
      alertDetail.action();
    }
     function temp(){
      confirmAlert({
        title: alertDetail.title,
        message: alertDetail.message,   
        buttons: [
          alertDetail.isChoose && {
                label: "취소",
                style:{position:'relative', left:'-20px',color:'#8C969F !important'},
                onClick: () =>close
            },
            alertDetail.isChoose && {
            label: "확인",
            style:{position:'relative', left:'-10px',color:alertDetail.color},
            id:alertDetail.buttonId,
            onClick: (e) => onSubmitAction(),
            },
            !alertDetail.isChoose && {
              label: "확인",
              style:{position:'relative', left:'-20px',color:alertDetail.color},
              id:alertDetail.buttonId,
              onClick: (e) =>onSubmitAction(),
              }
        ],
        overlayClassName: alertDetail.overlayClassName
      })
     }
   
     useEffect(()=>{
      if(alertDetail.title) {
        temp()
      }
    },[alertDetail])

  
    return [temp];
}

export default useConfirm;

• src/View/Main.js (변경 후)

 const alertMSG = (num,e,idx,num2) => {
			setAlertDetail({
                ...alertDetail,
                title:"콜백문자 삭제안내",
                message:"해당 문자를 삭제하시겠습니까? \n삭제된 문자는 복구가 불가능합니다.",
                isChoose:true, 
                action:()=>{deleteCallbackCard(e,idx,num2)},
                buttonId:'confirm_txt',
                overlayClassName:'overlay-custom-class-name'
            })
}