React 에서 Sweetalert2 사용

브라우저에서 alert 를 호출하면 뜨는 알림창은 브라우저 자체에서 제공하는 기본적인 UI 이다. 그러다 보니 따로 손봐주지 않으면 굉장히 밋밋하고 못생긴(?) 알림창이 나온다. 

나는 이쁜 것을 좋아하기 때문에 라이브러리를 사용해서 알림창을 이쁘게 만드는 법을 알아보았다. 사용할 라이브러리는 sweetalert2 이다.

 

라이브러리 적용 전

아래 이미지는 alert 를 호출한 UI 이다. 이 밋밋한 UI 를 라이브러리를 사용해서 변경해 볼 것이다.

 

Sweetalert2 적용 방법

1. 설치

yarn add sweetalert2

 

2. import

import Swal from "sweetalert2";

 

3. 코드에 적용

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

function App() {
  return (
    <div>
      <button
        onClick={() => {
          Swal.fire("SweetAlert2 사용 성공!");
        }}
      >
        클릭
      </button>
    </div>
  );
}

export default App;

 

리액트 프로젝트에 적용한 아주 간단한 예시이다.

 

Sweetalert2 라이브러리 적용 후

이제 이쁘게 alert 창이 잘 뜬다. 이쁘다 🌸

 

UI 를 커스텀 할 수도 있는 것 같은데, 아직 필요하지 않아서 나중에 필요할 때 알아보려고한다 ㅎㅎ

 

라이브러리 적용이 어렵다고 생각했는데, 생각보다 적용하는 법이 쉬워서 프로젝트에 자주 사용해야겠다. 🥳