[React] SweetAlert2 라이브러리로 Alert창 커스텀하기

 

 

 

 

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

 

 

 

SweetAlert2 라이브러리로 Alert창 커스텀하기

 

 

SweetAlert2 라이브러리를 사용하여 Alert 창을 멋지게 꾸밀 수 있습니다.

 

 

공식 URL

https://sweetalert2.github.io/

SweetAlert2

 

 

 

 

기본 Alert 창

 

 

 

기본 alert 는 매우 단순합니다.

 

 

 

 

SweetAlert2를 적용한 후의  Alert

 

 

 

SweetAlert2를 사용한 후의 Alert입니다.

 

 

 

 

 

SweetAlert2 라이브러리 사용 방법

 

script cdn을 추가하여 사용하는 방법도 있지만, 저는 install 하여 이용하였습니다.

 

 

터미널에 아래와 같이 입력하면 설치할 수 있습니다.

 

npm install sweetalert2

 

 

 

 

SweetAlert2 라이브러리 적용 방법

 

 

1. 플러그인 임포트

 

import Swal from 'sweetalert2'

  const handleCompanyInfoClick = () => {
    if (isCompanyInfoRegistered === true) {
      // 회사 정보가 등록되지 않은 경우
      navigate("/companyinfo");
    } else {
            Swal.fire({
                icon: "warning",
                title: "로그인 필요",
                text: "로그인이 필요합니다.",
            });
    }
  };

 

 

 

위와 같이 sweetalert2를 임포트하고, 기존 alert 가 있는 부분에 

 

            Swal.fire({
                icon: "warning",
                title: "로그인 필요",
                text: "로그인이 필요합니다.",
            });

 

 

위와 같이 Swal.fire 를 작성합니다.

icon에는 가장 윗부분의 느낌표 아이콘을 설정하고, title은 제목, text는 내용입니다.

 

 

 

 

 

아이콘은 총 다섯 가지가 있습니다.

 

공식 홈페이지에 가시면 예시를 확인할 수 있습니다.

 

 

 

 

 

 

alert 창을 커스텀하여 쉽고 빠르게 페이지 완성도를 향상할 수 있습니다.