[React] alert를 손쉽게 sweetalert2 라이브러리

서론

sweetalert2는 깔끔하고 멋진 alert창을 손쉽게 구현하게 해주는 라이브러리이다.

이번에 만들고 있는 쇼핑몰 앱에 모달창, 알림창을 넣어야 하는 경우가 많았다.

그래서 이것저것 찾아보다가 우연히 알게 된 마법 같은 라이브러리이다.

 

sweetalert2 공식 메인화면

 

 

---

설치

터미널 설치

npm install sweetalert2

 

CDN 이용

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

---

사용법

사용법은 너무나도 간단하다.

Swal 함수를 불러와 자신이 원하는 곳에 넣어주고, fire라는 키워드를 사용해 내부를 꾸며주면 된다.

import Swal from 'sweetalert2'

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})


// https://sweetalert2.github.io/#usage 참조

 

위의 코드에 있는 title, text, icon과 같은 속성 외에도 iconColor, target, customClass, timer 등 무수히 많은 속성값이 존재하니 자신이 원하는 대로 커스터마이징 할 수 있다.

---

예시코드

 

import './App.css'
import Swal from 'sweetalert2';

export default function App() {

  const handleError = () => {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Something went wrong!',
    })
  }

  const handleSave = () => {
    Swal.fire({
      title: "Do you want to save the changes?",
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: "Save",
      denyButtonText: `Don't save`
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire("Saved!", "", "success");
      } else if (result.isDenied) {
        Swal.fire("Changes are not saved", "", "info");
      }
    });
  }
  
  return (
    <div id='main-wrapper'>
      <button onClick={handleError}>경고 알림</button>
      <button onClick={handleSave}>저장</button>
    </div>
  )
}

---

 

 

예시결과

 

sweetalert2 예시영상

---

결론

알림창을 손쉽게 만들어주는 마법의 라이브러리 sweetalert2.

알림창과 모달창 둘 다 겸용 가능해 보인다.

디자인도 괜찮고 원한다면 자신이 스타일을 바꿀 수 있기 때문에 좋고,

5가지 주요한 아이콘을 제공해 주는 것도 크게 한 몫을 하는 것 같다.

 

나는 내 프로젝트에 이 라이브러리를 아래와 같은 상황에 주로 사용 중이다.

• button 태그에 onClick 이벤트를 추가해 상황에 맞는 알림창, 모달창 보여주기.
• form태그에 onSubmit 이벤트를 추가해 상황에 맞는 알림창, 모달창 보여주기.

 이는 대부분 로그인이나 상품의 추가/삭제와 관련된 기능에 활용하고 있다.

 

앞으로도 자주 사용할 것 같고, 꾸준히 업데이트되어 더 좋은 라이브러리가 되길 기원한다.

---

참고

https://sweetalert2.github.io/

SweetAlert2