[개발] React 에서 input type="number" 의 max 값 설정

안녕하세요 @realmankwon 입니다.

React에서 form.control을 사용하여 input element를 생성하고 숫자 타입(type="number")을 사용할 때, 최댓값 이상의 값을 입력하지 못하도록 하려면 max 속성을 사용하여 설정할 수 있습니다.

예를 들어, 다음과 같이 max 속성을 10으로 설정하면 최대값이 10이 되도록 제한됩니다.

<input type="number" name="quantity" min="1" max="10" />

그러나 이 속성만으로는 입력값이 최대값을 초과하는 경우를 완전히 방지할 수 없습니다. 사용자가 직접 입력하여 최댓값을 초과할 수 있기 때문입니다.

따라서, 사용자가 입력한 값을 검증하여 최댓값을 초과하는 경우에는 경고 메시지를 표시하거나 값을 수정할 수 있도록 해야 합니다. 이를 위해서는 onChange 핸들러를 사용하여 값이 변경될 때마다 검증을 수행하고, 필요한 처리를 수행할 수 있습니다.

예를 들어, 다음과 같이 onChange 핸들러를 사용하여 값을 검증하고, 최댓값을 초과하는 경우에는 값을 수정하도록 할 수 있습니다.

import { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState(0);
  const MAX_VALUE = 10;

  const handleChange = (event) => {
    const newValue = parseInt(event.target.value);
    if (newValue > MAX_VALUE) {
      setValue(MAX_VALUE);
    } else {
      setValue(newValue);
    }
  };

  return (
    <form>
      <label>
        Quantity:
        <input
          type="number"
          name="quantity"
          min="1"
          max={MAX_VALUE}
          value={value}
          onChange={handleChange}
        />
      </label>
    </form>
  );
}

위 예제에서는 useState 훅을 사용하여 value 상태값을 초기화하고, handleChange 함수에서 입력값을 검증하여 MAX_VALUE보다 크면 값을 수정하도록 합니다. 최종적으로 수정된 값을 input 엘리먼트의 value 속성으로 설정하여 화면에 반영됩니다.