[React] 실시간으로 input 값을 숫자만 입력 받는 방법

다음 예제를 통해 실시간으로 input 값을 어떻게 숫자만 입력받을 수 있는지 살펴봅시다.

다음은 HTML의 Form과 input을 사용해서 상품 코드를 숫자만 입력 받는 관리자 페이지입니다.

 

요구 사항

• 상품 코드는 숫자로만 이루어져 있습니다.
• 상품 코드를 입력하는 도중에 숫자가 아닌 문자를 입력하면 input 요소 밑에 error 메시지를 나타내며, '등록' 버튼을 비활성화 합니다.
• 상품 코드를 정상적으로 등록하면 "상품 코드가 등록되었습니다."라는 메시지와 등록된 상품 코드를 나타냅니다.

 

1. HTML 구조 설계

• div (Form)
  • form
    • input / button
• div (Modal)
  • div
    • span / p

컴포넌트는 상품 코드를 입력할 수 있는 form 컴포넌트, 안내 메시지를 보여주는 modal 컴포넌트를 사용합니다.

 

modal 컴포넌트의 경우에는 JSX 문법을 사용하였습니다.

정말 알기 쉽게 정리한 JSX란?

 <div className="App">
  {/* form */}
  <form className="form">
    <div className="form-group">
      <input
        type="text"
        name="name"
        placeholder="상품 코드를 입력해주세요"
        value={value}
        onChange={handleValidateChange}
      />
      <button onClick={handleValidateClick} disabled={isValidate}>
        등록
      </button>
    </div>
    <div>
      <p style={{ color: "red" }}>{errorMessage}</p>
    </div>
  </form>

  {/* modal */}
  {isModalOpen && (
    <div className="modal">
      <div className="modal-content">
        <span className="close" onClick={closeModal}>
          &times;
        </span>
        <p>{message}</p>
      </div>
    </div>
  )}
</div>

 

2. state 변수 추가

• input의 value 값을 관리하는 state 변수입니다.
• modal의 상태값을 관리하는 state 변수입니다.
• modal의 message(메시지) 값을 관리하는 state 변수입니다.
• errorMessage 값을 관리하는 state 변수입니다.
• button의 활성화를 관리하는 state 변수입니다.

  const [value, setValue] = useState("");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [message, setMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [isValidate, setisValidate] = useState(false);

 

3. handleValidateChange 함수

• input의 입력 값이 변하게 되면 실행 되는 함수입니다.
• input의 입력 값이 숫자인지 동적으로 유효성을 검사하기 위한 함수입니다.
• if (isNaN(userInput))
• => isNan() 메서드는 value가 숫자가 아니면 true를 반환하는 메서드입니다. 그렇기 때문에 value 값이 숫자가 아니면 errorMessage를 나타내며, '등록' 버튼의 상태를 비활성화 합니다.

const handleValidateChange = (e) => {
    const userInput = e.target.value;
    setValue(userInput);
    setErrorMessage("");
    setisValidate(false);

    if (isNaN(userInput)) {
        setErrorMessage("상품 코드는 숫자를 입력해주세요!");
        setisValidate(true);
    }
};

 

4. handleValidateClick 함수

• '등록' 버튼을 누르면 실행 되는 함수입니다.
• modal 창을 나타내기 위한 함수입니다.
• event.preventDefault()
• => 기본적으로 HTML은 form 태그가 동작하면 페이지를 새로고침 합니다. 그렇기 때문에 페이지 새로고침을 무효화 시켜야 합니다.

const handleValidateClick = (event) => {
    event.preventDefault(); // 페이지 새로고침 방지

    setMessage(
      <>
        상품 코드가 등록되었습니다.
        <br />
        등록된 상품 코드: {value}
      </>
    );
    setIsModalOpen(true);
};

 

---

 

정리

App.js

import { useState } from "react";
import "./App.css";

function App() {
  const [value, setValue] = useState("");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [message, setMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [isValidate, setisValidate] = useState(false);

  const handleValidateChange = (e) => {
    const userInput = e.target.value;
    setValue(userInput);
    setErrorMessage("");
    setisValidate(false);

    if (isNaN(userInput)) {
      setErrorMessage("상품 코드는 숫자를 입력해주세요!");
      setisValidate(true);
    }
  };

  const handleValidateClick = (event) => {
    event.preventDefault(); // 페이지 새로고침 방지

    if (isNaN(value) || value === "") {
      setisValidate(false);
    } else {
      setMessage(
        <>
          상품 코드가 등록되었습니다.
          <br />
          등록된 상품 코드: {value}
        </>
      );
      setIsModalOpen(true);
    }
  };

  // 모달 닫기 함수
  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="App">
      {/* form */}
      <form className="form">
        <div className="form-group">
          <input
            type="text"
            name="name"
            placeholder="상품 코드를 입력해주세요"
            value={value}
            onChange={handleValidateChange}
          />
          <button onClick={handleValidateClick} disabled={isValidate}>
            등록
          </button>
        </div>
        <div>
          <p style={{ color: "red" }}>{errorMessage}</p>
        </div>
      </form>

      {/* modal */}
      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
            <span className="close" onClick={closeModal}>
              &times;
            </span>
            <p>{message}</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;