React 에서 Sweetalert2 사용하기!

안녕하세요 블로그 개설하고 처음 글을 작성하는 거라 부족 할 수도 있지만 최선을 다해서 작성해보겠습니다.

alert 란 ?

alert 는 확인 버튼을 가지며 메시지를 지정할 수 있는 경고 창을 말합니다.

단순하게 메시지를 띄워서 사용자한테 메시지를 전달 할 수 있습니다.

sweetalert2 라는 라이브러리로 새롭게 꾸밀 수 있습니다.

기존의 alert 창

기존의 alert창

JavaScript에서 기본적으로 제공하는 alert창의 모습입니다.

약간 투박하게 생기지 않았나요 ? 이 창을 저희가 css를 통해 직접 커스텀 하는 경우도 있습니다만,

처음부터 커스텀하기에는 어렵기 때문에 sweetalert2라는 라이브러리를 통해 꾸밀 수 있습니다.

sweetalert2 사용하기

터미널을 통해서 설치해줍니다.

yarn add sweetalert2

사용하려는 컴포넌트에 불러와 줍니다.

import Swal from "sweetalert2";

sweetalert 사용

제가 개인적으로 진행하는 프로젝트에서는 sweetalert를 사용했습니다.

Swal.fire({
        title: "Source Code",
        html: `
        sweetalert를 사용합니다.
        <hr />
        sweetalert를 사용합니다.
        `,
        showCancelButton: false,
        confirmButtonText: "확인",
    })

안에 코드를 보면 html : 에 ``(백틱)을 사용했는데 백틱을 사용하면 html태그를 불러와서 사용할 수 있습니다.

위 사진은 html태그 중 <hr />를 불러와서 사용해봤습니다.

더 많은 정보는 ..

 

https://sweetalert2.github.io/

SweetAlert2

 

이곳에서 많은 정보를 얻을 수 있습니다.

 

감사합니다.