[React] onChange

onChange란?

사용자가 input, select, textarea 등의 폼 요소에 값을 입력하거나 선택할 때 발생한다. 이 이벤트를 사용하여 사용자 입력에 따라 리액트 컴포넌트의 상태(state)를 업데이트할 수 있다.

 

input 요소에서 onChange 이벤트를 사용하는 방법은 다양하다. 일반적으로 input 요소의 값이 변경될 때마다 이벤트가 발생하며, event.target.value를 통해 변경된 값에 접근할 수 있다. 이를 활용하여 사용자 입력에 따라 리액트 컴포넌트의 상태를 업데이트할 수 있다.

 

import { useState } from 'react';

function InputExample() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <div>
      <label htmlFor="input-field">Input field:</label>
      <input id="input-field" type="text" value={value} onChange={handleChange} />
      <p>You entered: {value}</p>
    </div>
  );
}

위 코드에서 value와 setValue 변수를 useState 훅을 사용하여 선언하고, handleChange 함수에서 event.target.value를 가져와 setValue 함수를 호출하여 상태를 업데이트합니다. input 요소에서는 입력한 값을 value prop으로 할당하여 현재 입력한 값을 화면에 표시합니다.

 

또한 input 요소에서 onChange 이벤트를 사용하여 입력한 값을 검증할 수도 있다.

import { useState } from 'react';

function InputValidationExample() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    const newValue = event.target.value;
    if (newValue.length >= 10) {
      setValue(newValue);
    }
  }

  return (
    <div>
      <label htmlFor="input-field">Input field:</label>
      <input id="input-field" type="text" value={value} onChange={handleChange} />
      {value.length < 10 && <p>Please enter at least 10 characters.</p>}
    </div>
  );
}

위 코드에서는 handleChange 함수에서 입력한 값의 길이를 검증하고, 길이가 10자 이상인 경우에만 setValue 함수를 호출하여 상태를 업데이트한다. input 요소에서는 입력한 값을 value prop으로 할당하여 현재 입력한 값을 화면에 표시한다. 또한, 길이가 10자 미만인 경우에는 오류 메시지를 표시한다.

 

이처럼 input 요소에서 onChange 이벤트를 활용하여 사용자 입력을 처리하고, 상태를 업데이트하고, 입력값을 검증할 수 있다.