SweetAlert 라이브러리는 개발자에게 React 애플리케이션을 위한 맞춤형 알림 모듈을 제작할 수 있는 권한을 부여합니다. 이러한 알림은 프로그램 내에서 중요한 공지사항, 오류 메시지 또는 성과를 사용자에게 알리는 데 활용되어 탁월한 사용자 경험에 기여할 수 있습니다.
SweetAlert 라이브러리 설치
SweetAlert 라이브러리를 사용하여 알림을 생성하려면 원하는 패키지 관리자를 사용하여 라이브러리를 설치해야 합니다.
앞서 언급한 프로세스는 NPM 패키지 관리자를 사용하여 실행할 수 있으며, 터미널 내에서 후속 명령을 입력하여 설치를 완료할 수 있습니다:
npm install sweetalert --save
SweetAlert를 사용하여 알림 생성
개인화된 알림을 생성하기 위해 React 애플리케이션 내에서 SweetAlert 라이브러리를 활용하는 것은 Toastify 라이브러리의 구현과 유사하며, “swal”로 지정된 SweetAlert가 제공하는 함수는 알림의 속성을 지정하면서 알림 구성 요소의 인스턴스를 생성하기 때문에 유사성을 공유합니다.
알림 요소를 생성하기 위해 `swal()` 함수를 활용하는 코드 스니펫의 좀 더 정제된 버전을 제공해 주시겠습니까?
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
지정된 버튼을 클릭하면 Swal 함수가 활성화되어 “Hello There”라는 문구가 포함된 알림 알림이 생성됩니다.
스왈 기능을 사용하려면 알림 제목, 전달할 메시지, 알림과 함께 표시할 아이콘 등 세 가지 입력이 필요합니다.
성공, 경고, 오류 또는 정보 중 사용 가능한 옵션에서 아이콘 매개변수의 값을 지정하세요. 따라서 선택한 값에 따라 해당 알림 아이콘이 표시됩니다.
“개인이 세금 신고서를 제출하는 동안 자주 저지르는 몇 가지 오류가 있습니다. 여기에는 수학 계산 오류, 잘못된 양식 제출, 정보 누락 또는 불완전, 적격 공제 및 세액 공제 신청 실패 등이 포함됩니다.
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There', 'Welcome to my Page', 'success');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
지정된 버튼을 클릭하면 즉시 알림 기능이 호출되어 “안녕하세요” 및 “내 페이지에 오신 것을 환영합니다”라는 인사말과 함께 완료 표시가 화면에 나타납니다.
세 개의 매개 변수가 있는 `swal` 함수를 사용하는 것 이외의 옵션은 앞서 언급한 방법과 함께 알림 구성 요소의 특성을 지정하는 “object” 매개 변수로 알려진 추가 속성을 사용하는 것입니다.
질문에 대한 답변, 정보 제공 등 다양한 작업을 지원하도록 설계된 컴퓨터 프로그램입니다.
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
icon: 'success',
button: 'OK',
}
);
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
위에서 Swal 함수는 제목, 텍스트, 아이콘 및 버튼의 네 가지 속성으로 구성된 객체와 함께 사용됩니다.
제목 매개 변수는 알림의 제목을 지정하고 텍스트 속성은 메시지의 내용을 담당합니다. 또한 아이콘 속성을 사용하면 통지 내에 표시되는 기호를 지정할 수 있습니다.
앞서 언급한 코드 스니펫은 새 항목이 Amazon SQS 대기열에 추가되면 Apple 푸시 알림 서비스(APN)를 통해 iOS 장치로 알림이 전송되도록 지정된 이벤트 구독의 구성과 관련이 있습니다. 매개 변수 “환경”은 SNS 토픽이 존재하고 생성된 환경을 나타냅니다. “from-sdk” 속성은 메시지가 앱 SDK에서 수신되었는지 여부를 나타내며, “to”는 디바이스에서 푸시 알림을 수신하는 데 사용되는 대상 토큰을 나타냅니다. 마지막으로 버튼 속성은 AWS 모바일 허브에서 생성된 모바일 알림에 인쇄된 레이블의 윤곽을 나타내며, 기본값은 “OK”입니다.
버튼 속성 사용자 지정하기
알림 구성 요소 내에서 버튼 요소의 구성 설정을 조정하여 원하는 시각적 디자인 사양에 맞게 조정할 수 있습니다. 여기에는 버튼의 기능과 표시를 모두 조절하는 속성이 포함된 객체를 제공하는 것이 포함될 수 있습니다.
버튼의 기본 속성에는 크기, 모양, 색상 및 텍스트가 포함됩니다.
swal(
{
button: {
text: "OK",
value: true,
visible: true,
className: "",
closeModal: true
},
}
);
코드 블록은 버튼에 여러 속성을 활용합니다.
버튼에 표시되는 레이블은 버튼이 전달하는 특정 작업이나 정보를 식별하는 역할을 하므로 버튼의 전체적인 모양과 기능에 있어 중요한 요소입니다. 따라서 적절하고 시각적으로 매력적인 텍스트를 선택하는 것은 버튼이 사용자와 효과적으로 소통하고 그 목적을 정확하게 표현하는 데 필수적입니다.
이 컨텍스트에서 지정한 대로 버튼을 클릭하면 반환되는 실제 값의 중요도가 할당된 변수입니다.
버튼의 가시성 부울 값은 버튼의 시각적 표시를 결정하는 변수로 표시됩니다.
클래스 속성은 버튼 요소에 적용될 CSS 클래스를 지정하는 문자열로 정의됩니다.
“closeModal” 기호로 지정된 관심 변수는 버튼을 눌렀을 때 모달을 종료할지 여부를 결정하는 논리 값입니다.
“buttons” 속성과 함께 배열을 활용하면 배열 내의 각 요소가 원하는 버튼의 문자열 표현인 여러 개의 버튼을 렌더링할 수 있습니다.
이에 대해 좀 더 자세히 설명해 주시겠습니까?
swal(
{
buttons: ["Cancel", "Ok"],
}
);
알림 구성 요소는 “취소” 및 “확인”이라는 레이블이 붙은 두 개의 버튼과 해당 버튼의 속성을 false로 설정하여 해당 버튼을 비활성화하는 기능으로 구성되어야 합니다. 이렇게 하면 사용자 상호 작용에 사용할 수 있는 버튼이 없는 알림이 표시됩니다.
알림 컴포넌트 내부의 HTML 요소 렌더링
단순한 텍스트 문자열 이외의 HTML 요소와 같은 비표준 데이터 유형을 활용하여 알림을 만들 수 있으므로 광범위한 개인화 가능성을 제공할 수 있습니다.
저는 파리에 두 번이나 다녀왔습니다. 처음엔 에펠탑을 방문하고 센 강에서 보트를 탔어요.” 제안: “이전에는 매혹적인 도시 파리를 두 번 방문하는 기쁨을 누렸어요. 첫 번째 여행에서는 상징적인 에펠탑 꼭대기에서 파노라마 전망을 감상하고 고요한 센 강변을 따라 여유롭게 크루즈를 즐겼어요.
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
content: {
element: 'input',
attributes: {
placeholder: 'First Name',
type: 'text'
}
},
buttons: 'Sign Up'
}
)
return (
<div className="app">
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
“content” 속성을 사용하여 플레이스홀더 텍스트와 함께 입력 요소를 표시하는 시나리오를 살펴봅시다.
“content” 속성 및 렌더링할 HTML 요소를 지정하는 “element” 속성 등 앞서 언급한 속성을 활용하여 알림의 내용을 지정해 주세요. 앞서 언급한 HTML 요소에 속성을 할당하려면 “attributes” 속성을 활용하세요.
버튼을 클릭하면 메시지가 표시됩니다.
알림 컴포넌트 스타일 지정
SweetAlert 라이브러리에서 제공하는 표준화된 알림 상자 디자인을 따르는 대신 자신만의 CSS 스타일을 통합하여 알림 상자의 모양을 개인화할 수 있습니다.
고유 식별자를 정의하여 메시지의 스타일을 결정하는 className 속성을 사용하여 알림에 적절한 CSS 클래스를 적용하세요.
“배고픔을 느끼고 있습니다”에 대해 더 설득력 있는 문구를 제공해 주시겠습니까?
swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
button: false,
className: 'alert',
}
)
“알림을 만들고 className을 정의한 후 CSS 스타일을 정의할 것입니다”에 대한 대체 문구를 제공해 주시겠습니까?
.alert{
background-color: green;
font-family: cursive;
border-radius: 15px;
}
렌더링 시 앞서 언급한 CSS 스타일이 알림에 적용됩니다.
알림 컴포넌트 닫기
SweetAlert는 알림을 해제할 수 있는 다양한 사용자 지정 기능을 제공합니다.여기에는 사용자가 기본 설정에 따라 알림 닫기 환경을 조정할 수 있는 closeOnEsc, closeOnClickOutside 및 타이머 속성이 있습니다.
closeOnEsc 속성은 사용자가 이스케이프 키를 눌렀을 때 알림 대화 상자를 닫을지 여부를 지정하며, 이 속성은 사용자 지정에 부울 값을 사용할 수 있습니다.
swal(
{
...,
closeOnEsc: false,
}
)
`closeOnEsc` 속성의 표준 동작은 `true`로 설정하는 것입니다. 그러나 앞서 언급한 코드 스니펫에서는 이 속성을 의도적으로 재정의하여 `false`로 설정했습니다. 이렇게 수정하면 사용자가 이스케이프 키를 사용하여 알림 상자를 닫을 수 없게 됩니다.
사용자가 해당 컨테이너 외부의 아무 곳이나 클릭하여 팝업 메시지를 해제할 수 있는지 여부를 ‘closeOnClickOutside’ 속성을 사용하여 확인할 수 있습니다.
이 속성이 true로 설정되어 활성화되면 경계 밖에서 클릭이 감지되면 알림 상자가 자동으로 닫히며, 이는 SweetAlert에서 제공하는 표준 기능입니다. 이 기능을 비활성화하고 수동 상호 작용을 통해서만 알림 상자를 닫을 수 있는 기능을 유지하려면 closeOnClickOutside 속성을 false로 설정하세요.
swal(
{
...,
closeOnClickOutside: false,
}
)
타이머 속성을 사용하면 밀리초 단위의 정수 값으로 지정된 지정된 기간에 도달하면 알림 상자를 자동으로 닫을 수 있습니다.
swal(
{
...,
timer: 5000,
}
)
앞서 언급한 예에서는 카운트다운 타이머의 지속 시간이 5000밀리초 후에 만료되도록 설정되어 있으며, 이는 알림에 의해 생성된 시각적 신호가 5초 동안 표시된 후 사라지도록 설정되어 있음을 의미합니다.
SweetAlert를 사용한 효율적인 사용자 정의 알림
SweetAlert 라이브러리를 사용하면 스왈 기능을 활용하여 React 애플리케이션 내에서 개인화된 알림을 생성할 수 있습니다. 이 기능을 통해 사용자는 맞춤형 속성과 동작으로 알림을 구성할 수 있습니다. 또한 React-Toastify와 같은 다른 라이브러리를 통합하여 React 환경에서 고유한 알림을 개발할 수도 있습니다.