[REACT] SWAL 사용해서 알림창 구현하기

공식 홈페이지 가이드

 

여기서 맘에 드는거 따라 쓰면 됨!

SweetAlert

 

 

sweetAlert 설치

npm install sweetalert

 

 

회원가입 완료 알림창 예시

...
import swal from "sweetalert"

function SignUp(){ 

 ...
 
    <button className="button-box" onClick={() => {
       {passwordcheck==true?
          swal("가입완료!", "환영합니다!", "success")
          .then(()=>{
              window.location.replace('/Login');
          })
       :
          swal("가입실패!", "비밀번호를 확인하세요!", "warning")
       }
    }} > 
       가입하기
    </button>

...

}

Passwordcheck가 true이면 가입완료 후 ok버튼을 누르면 로그인창으로 이동하도록 구현함

swal 뒤에 .then(()=>)을 이용하면 먼저 호출된 swal이 닫힌 후 실행됨