window.confirm과 alert의 간단한 사용방법

Blackeichi·2022년 11월 30일
0
post-custom-banner

댓글의 삭제기능을 구현하던 중, 사용자가 삭제버튼을 누르면 한번 더 확인하는 기능을 제공하고자 한다.

매번 삭제 기능을 구현할 때마다 confirm 과 alert 가 헷갈려, 블로그에 올려놓고 까먹을 때 마다 참고할려고 한다.🙄

우선 다음과 같이 버튼을 클릭했을 때 function이 작동하도록 코딩을 하였다.

const delComment = (id: number) => {
    const ok = window.confirm("정말 삭제하시겠습니까? 😮");
    if (ok) {
      window.alert("삭제되었습니다. 👏");
      대충 데이터베이스에서 삭제하는 내용~
      );
    }
  };
.......
	<button onClick={()=>delComment(id)}>삭제</button>

우선 confirm의 경우에는 다음 사진처럼

확인과 취소의 버튼이 나온다.
사용자가 어떤 버튼을 클릭하냐에 따라 true, false로 결과값을 사용할 수 있다!!

사용자가 확인을 누르면 즉 if(ok === true)이면,

alert를 통해 다음과 같이 정보를 보여줄 수 있다!

profile
프론트엔드 주니어 개발자 한정우입니다. 😁
post-custom-banner

0개의 댓글