React(리액트) 티키타카 30 (SweetAlert2)

그냥 alert를 디버깅이나 프로토타입이 아닌 만약 Production 모드, 곧 

실제 서비스에 사용한다면 그건 거의 예의가 바닥과 키스하는 수준일거시다.

 

많이 사용되는 sweetalert는 react에도 역시 편하게 사용된다. 그냥 한번만 보장

 

설치

npm i sweetalert2  sweetalert2-react-content

 

그냥 보기만 하면 알게 되는 억지스러운 억지 예제 중에서 억지스러울만큼

억지스럽기가 억지스러운 억지스럽기 그지없는 억지 예제

App.jsx

import { useState } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

function App() {
  const [userInput, setUserInput] = useState("");

  // https://sweetalert2.github.io/#usage를 참고해서 쓰면 거저 쓰게 됨!
  const getUserInput = () => {
    withReactContent(Swal).fire({
      title: <i>머라 쓸거얌</i>,
      input: "text",
      preConfirm: () => {
        setUserInput(Swal.getInput()?.value || "");
      },
    });
  };

  const justMsg = () => {
    withReactContent(Swal).fire("안농 카리낭 반가벙");
  };

  const successMsg = () => {
    withReactContent(Swal).fire({
      title: "카리낭",
      icon: "success" /* error, info, warning, question */,
      draggable: true,
    });
  };

  const customMsg = () => {
    withReactContent(Swal).fire({
      title: "공격 아닌 수비닝",
      html: "비 오기 전<br> 항상 바람이 부낭?",
      imageUrl:
        "https://img.tenasia.co.kr/photo/202501/BF.39144843.1.jpg",
      imageWidth: 160,
      imageHeight: 200,
      imageAlt: "그저 복사붙여넣기",
      // 아래 preConfirm을 잘 쓰겠네용
      preConfirm: () => {
        setUserInput("세이니닝?");
      },
    });
  };

  const customMsg2 = () => {
    withReactContent(Swal)
      .fire({
        title: "정말이닝?",
        text: "되돌릴수 없다니깡!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "좋아 지워주겠엉",
        cancelButtonText: "암것도 안할꺼얌",
      })
      .then((result) => {
        if (result.isConfirmed) {
          setUserInput("지웠겠징!");
          Swal.fire({
            title: "지웠지롱",
            text: "지웠다냥? 그렇게 쉽겡",
            icon: "success",
          });
        } else {
          setUserInput("");
        }
      });
  };

  return (
    <>
      <h1>띠이작</h1>
      <button onClick={getUserInput}>입력받기</button>
      <button onClick={justMsg}>단순 메세지</button>
      <button onClick={successMsg}>썽꽁 메세지</button>
      <button onClick={customMsg}>커스텀 메세지</button>
      <button onClick={customMsg2}>커스텀 메세지</button>
      <div>입력: {userInput}</div>
    </>
  );
}

export default App;

 

결과는 아래와 같지 않고  비스무리 하당. (왱? 자주 이미지와 내용을 괘니 바꾸니깡....) 

 

소스를 누네 힘주고 보았다면,  withReactContent(Swal).fire 만 받아들인다면 

기존 sweetalert2 사용방식과 거의 완벽하게 똑같다.

 

만약  조금 더 소스를 심플하게 사용하고 싶어서 아래와 같은 소스를 맹글었다면

위 소스는 어떻게 고쳐질깡?....  꼬옥 딕덥 해 보기를.. ( 해 뜬 날 해보장!~~)

 

YWSwal.jsx

import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";

const YWSwal = withReactContent(Swal);
export default YWSwal;

---

 

오해란 결이 다르다는 이야기당.

결이 다르다고 필연적으로 오해가 발생하진 않지만 마리당.

 

아두 살짜기 방향만 틀어도, 어울림의 눈치를 흘낏 볼수동.

새로운 조합 디자인이 기쁘미와 탄성의 초대장을 만들수동 

 

하지만 그런 기대와 꿈은 꽤나 긴 디테일에 대한 

땀 달짝 한 바께스를  무리하게 요구 할 지도 모른당.

 

노인의 식은 땀 보다는 

젊음의 김 모락 땀이 긍정적이다.

 

긍정적인 땀에 속는 게  창피하여

땀을 파 묻어버리는 건  길게 본 인생에선 부끄러움이 될거다. 

 

속는 셈 치고 행동하자.

3D 세상에선 생각의 위치를 바꾸면  이런저런 다른 게 보인당.

속는게 속아 주는 게 될 수 있당.

 

 

https://www.youtube.com/watch?v=fSuvy8ALqm0