SweetAlert는 웹 개발에서 경고창이나 팝업창을 도움을 주는 라이브러리입니다. SweetAlert를 사용하면 사용자가 입력한 데이터를 받아서 처리하는 기능을 쉽게 구현할 수 있습니다. 이번 글에서는 SweetAlert를 사용하여 입력 폼을 활용하는 방법에 대해서 알아보겠습니다.

SweetAlert 설치하기

먼저 SweetAlert를 설치해야 합니다. SweetAlert는 npm을 통해 설치할 수 있습니다.

npm install sweetalert2

SweetAlert로 입력 폼 띄우기

SweetAlert를 사용하여 입력 폼을 띄우기 위해서는 Swal.fire() 함수를 사용해야 합니다. 아래의 예제 코드는 버튼 클릭 시 SweetAlert를 통해 입력 폼을 띄우는 기능을 구현한 예제입니다.

const button = document.querySelector('#show-input-form');

button.addEventListener('click', () => {
  Swal.fire({
    title: '데이터 입력',
    html: '<input type="text" id="input-field" class="swal2-input">',
    showCancelButton: true,
    confirmButtonText: '확인',
    cancelButtonText: '취소',
    preConfirm: () => {
      const inputField = document.querySelector('#input-field');
      return inputField.value;
    }
  }).then((result) => {
    if (result.value) {
      // 입력 데이터를 처리하는 로직 작성
      console.log('입력한 데이터:', result.value);
    }
  });
});

입력 데이터 처리하기

SweetAlert로 입력 폼을 띄우고 사용자가 데이터를 입력하고 확인을 클릭했을 때, 입력한 데이터를 처리하는 방법에 대해 설명합니다. 위의 예제 코드에서 확인을 클릭하면 preConfirm 콜백 함수가 실행됩니다. 이 함수에서는 입력 폼의 값을 가져와서 반환해야 합니다. 반환된 값은 result.value로 확인할 수 있습니다. 이 값을 이용하여 입력 데이터를 처리할 수 있습니다.

위의 예제 코드에서는 단순히 입력한 데이터를 콘솔에 출력하는 부분을 작성했습니다. 이 부분을 자신의 로직으로 수정하여 입력 데이터를 활용할 수 있습니다.

참고 자료

• SweetAlert 공식 문서: https://sweetalert2.github.io/
• SweetAlert GitHub 저장소: https://github.com/sweetalert2/sweetalert2