React | SweetAlert로 alert대체하기

Jeremy·2022년 10월 5일
0
post-thumbnail

alert를 사용하다보면 디자인면에서나 기능측면에서 까다로울 때가 있다.

예를 들어 게시글 작성중 나가기 버튼을 눌렀을 때, '작성한 내용이 날라갈수도 있습니다. 그래도 나가시겠습니까?'라는 alert창을 띄운다고 가정해보자. 계속 작성하기 위해 아니오를 누른다면 새로고침되면서 데이터가 날라가버린다.

이에 대한 방안을 모색하던중 디자인부분과 기능적 측면 두 마리의 토끼를 한번에 잡을 수 있는 라이브러리를 발견했다.

SweelAlert 이다.
이 라이브러리를 활용하여 새로고침을 막고 버튼또한 여러가지로 커스텀할 수 있어 유용하게 사용할 수 있었다.

우선

npm install sweetalert
or
yarn add sweetalert

로 패키지를 설치해준다.

import swal from 'sweetalert';

 const onClickGoOut = (e) => {
    e.preventDefault();
    swal('작성한 내용이 사라질 수 있습니다. 그래도 나가시겠습니까?', {
      buttons: {
        cancel: '아니요. 계속 작성할래요',
        '네,나갈래요': true,
      },
    }).then((value) => {
      switch (value) {
        case '네,나갈래요':
          navigate('/meeting');
          break;

        default:
          break;
      }
    });
  };

그리고 이와 같이 커스텀하여 사용하면 된다.

profile
chill~

0개의 댓글