들어가며
JavaScript에는 브라우저에서 바로 사용할 수 있는 기본 대화상자 함수가 있습니다.
alert, prompt, confirm입니다.
요즘 서비스에서는 커스텀 모달을 더 많이 사용하지만, 간단한 테스트나 학습용으로는 여전히 유용합니다.
alert()
alert()는 사용자에게 간단한 메시지를 보여줍니다.
1
alert("저장이 완료되었습니다.");
사용자가 확인 버튼을 누르기 전까지 다음 작업이 진행되지 않습니다.
그래서 실제 서비스에서는 남용하면 사용자 경험이 답답해질 수 있습니다.
prompt()
prompt()는 사용자에게 문자열 입력을 받을 수 있는 대화상자를 띄웁니다.
1
2
3
const name = prompt("이름을 입력해주세요.");
console.log(name);
기본값을 함께 전달할 수도 있습니다.
1
const name = prompt("이름을 입력해주세요.", "홍길동");
사용자가 값을 입력하고 확인을 누르면 입력한 문자열이 반환됩니다.
취소를 누르면 null이 반환됩니다.
confirm()
confirm()은 사용자에게 확인 또는 취소를 선택하게 합니다.
1
2
3
4
5
6
7
const result = confirm("정말 삭제하시겠어요?");
if (result) {
console.log("삭제를 진행합니다.");
} else {
console.log("삭제를 취소했습니다.");
}
확인을 누르면 true, 취소를 누르면 false를 반환합니다.
삭제, 로그아웃처럼 사용자의 의사를 한 번 더 확인하고 싶을 때 사용할 수 있습니다.
세 함수 비교
| 함수 | 역할 | 반환값 |
|---|---|---|
alert() | 메시지 표시 | 없음 |
prompt() | 텍스트 입력 받기 | 문자열 또는 null |
confirm() | 확인/취소 선택 | true 또는 false |
사용할 때 주의할 점
브라우저 기본 대화상자는 디자인을 자유롭게 바꾸기 어렵습니다.
또한 대화상자가 떠 있는 동안 사용자가 다른 작업을 하기 어렵습니다.
그래서 실제 서비스 UI에서는 SweetAlert2 같은 라이브러리나 직접 만든 모달 컴포넌트를 사용하는 경우가 많습니다.
다만 간단한 실습이나 동작 확인 용도로는 빠르게 사용하기 좋습니다.
마무리
alert, prompt, confirm은 브라우저에서 제공하는 기본 대화상자 함수입니다.
메시지만 보여줄 때는 alert, 입력을 받을 때는 prompt, 확인 여부를 받을 때는 confirm을 사용합니다.
실제 서비스에서는 사용자 경험을 고려해 커스텀 모달로 대체하는 경우가 많다는 점도 함께 기억해두면 좋습니다.