230831) React 에서 confirm (확인,취소) 알림창 띄우기

1. <button> 태그를 생성하고, 클릭 시 글 제거 함수를 일으키도록 한다.

 

예시)

<button
              onClick={() => {
                deletePostHandler(post);
              }}
            >
              삭제
            </button>

여기서 매개변수로 넣은 post는 제가 삭제할 post의 정보일 뿐입니다!

각자의 상황에 맞추어 함수를 실행해 주기만 하시면 됩니다!

 

 

2. 해당 함수에 if else 문을 삽입하고, if 문안에 window.confirm("") === true 조건을 넣어 준다.

여기서 ""안에 들어가는 메세지는 알림창의 메세지로 뜨게 된다.

if 문 안에 있는 것이 이용자가 확인을 눌렀을 경우, else 문이 취소를 눌렀을 경우에 실행되는 부분이다.

 

예시)

const deletePostHandler = (post) => {
    if (window.confirm("정말 삭제하시겠습니까?") === true) {
      deleteMutation.mutate(post);
      return alert("글이 삭제되었습니다!");
    } else {
      return;
    }
  };

위 코드를 실행하면 버튼을 누를 때 "정말 삭제하시겠습니까?"라는 알림창이 발생하며, 확인을 눌렀을 시에는 삭제 진행 / 취소를 눌렀을 경우에는 아무런 변화도 일어나지 않게 된다!

 

 

---

 

 

오늘도 잘 해냈다!