React의 알림 방법

고객은 대화형 기능이 있는 웹 애플리케이션을 사용하기를 원합니다. 높은 사용자 경험 기준을 유지하면 사용자가 더 오래 머무르고 웹사이트로 돌아올 수 있습니다.

고객과의 소통은 좋은 UX를 유지하기 위한 필수 요소 중 하나입니다. 예를 들어 빨간색 텍스트를 사용하여 사용자에게 문제가 있음을 알릴 수 있습니다.

웹 개발자는 다른 많은 방법을 사용하여 사용자와 통신할 수 있습니다. 이 기사에서는 alert() 메소드와 이를 사용하여 사용자와 통신하는 방법을 살펴봅니다.

React에서 window.alert() 사용

alert() 메서드는 종종 사용자에게 메시지를 표시하는 데 사용됩니다. 이 메서드는 버튼을 클릭하여 사용할 수 있는 대화 상자를 표시합니다.

팝업 메시지는 페이지 중앙에 표시되며 사용자가 앱과 상호 작용할 수 있는 기능을 제한합니다.

경고의 메시지를 강조 표시하므로 이 메서드는 중요한 정보를 전달하는 데 사용해야 합니다. 그러나 사용자는 메시지를 닫아도 애플리케이션을 계속 사용할 수 있습니다.

이상적인 시나리오에서 window.alert()는 문제가 있는 경우에만 트리거되고 팝업 메시지를 표시해야 합니다. 중대한 오류가 없는 경우 덜 강제적인 다른 방법을 사용하여 사용자와 통신할 수 있습니다.

이 메서드는 경고 상자의 텍스트를 나타내는 문자열인 하나의 인수를 사용합니다. 아무것도 반환하지 않습니다.

alert()의 작동 방식을 더 잘 이해하기 위해 이 예를 살펴보겠습니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [error, setError] = useState(true);
  const validateField = (e) => {
    setError(e.target.value.indexOf("@") === -1 ? true : false);
  };
  const handleEmailSubmit = (e) => {
    if (error) {
      alert("please enter correct e-mail");
    } else {
      return null;
    }
  };
  return (
    <div className="App">
      <input type="text" onChange={(e) => validateField(e)}></input>
      <button onClick={() => handleEmailSubmit()}>Submit E-mail</button>
    </div>
  );
}

codesandbox의 라이브 데모를 보면 입력 필드와 제출 버튼이 있는 간단한 애플리케이션이 있음을 알 수 있습니다.

여기에서 useState() 후크를 가져와서 상태 변수 error와 해당 값을 업데이트하는 함수를 생성합니다. 나중에 이 상태 변수를 확인하여 사용자에게 경고하고 이메일을 올바르게 입력하도록 지시할지 여부를 결정합니다.

빈 필드를 제출하면 오류가 발생하므로 상태 변수를 기본적으로 true로 설정합니다.

validateField() 함수에서 텍스트 입력 값이 실제 이메일인지 확인하고 그에 따라 error 상태 변수를 업데이트합니다.

특히 텍스트 입력에 모든 이메일에 필수적인 @ 기호가 포함되어 있는지 확인합니다. 텍스트 필드에 @ 기호가 없는 경우 삼항 연산자를 사용하여 상태 변수를 true로 업데이트합니다.

그렇지 않으면 error 변수를 false로 설정합니다.

또한 사용자가 앱에서 버튼을 클릭할 때 실행되는 handleEmailSubmit() 함수가 있습니다. error 상태 변수의 값을 확인하고 오류가 있으면 alert() 함수를 호출합니다.

JSX에는 <input>과 <button>이라는 두 개의 요소가 있는 <div> 컨테이너가 있습니다. 텍스트 입력에는 값이 변경될 때마다 입력에 @ 기호가 포함되어 있는지 확인하고 이에 따라 error 변수의 값을 업데이트하는 onChange 이벤트 핸들러가 있습니다.

버튼의 onClick 이벤트 핸들러는 오류가 있는 경우 경고를 표시하는 handleEmailSubmit 기능을 호출합니다.