onChange

• onChange는 폼(Form) 엘리먼트에서 발생하는 이벤트 값입니다. 이벤트 핸들러를 등록하여 해당 엘리먼트의 값이 변경될 때 실행되는 함수를 지정할 수 있습니다.

• onChange 이벤트는 주로 <input>, <textarea> , <select> 와 같은 사용자 입력을 받는 엘리먼트에서 사용됩니다.

• 엘리먼트의 값이 변경되었을 때, 사용자가 선택한 옵션이 변경되었을 때, 텍스트 입력 상자의 내용이 변경되었을 때 등의 상황에서 onChange 이벤트가 발생합니다.

• 예를 들어, <input> 엘리먼트에서 onChange 이벤트를 사용하면 사용자가 텍스트를 입력할 때마다 이벤트 핸들러 함수가 실행됩니다. 이를 통해 사용자 입력에 대한 실시간 반응이 가능해집니다.
  마찬가지로 <select> 엘리먼트에서는 사용자가 다른 옵션을 선택할 때마다 onChange 이벤트가 발생합니다.

• onChange 이벤트를 등록하려면 JavaScript를 사용하여 이벤트 핸들러 함수를 작성하고, 해당 엘리먼트에 함수를 연결해야 합니다.

  • 이벤트 핸들러 함수에서는 엘리먼트의 현재 값을 읽어오거나 처리하는 로직을 구현할 수 있습니다.

onChange 예시

• <input> <textarea> <select>와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용.
• React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트함
• onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있음
• 컴포넌트 return 문 안의 input 태그에 value와 onChange를 넣어주었습니다.
• onChange는 input의 텍스트가 바뀔 때마다 발생하는 이벤트입니다.
• 이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 변경합니다.

// 예시 1: input type = "text" / e.target.value
function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

// 예시 2: input type = "checkbox" / e.target.checked

function CheckboxExample() {
    const [isChecked, setIsChecked] = useState(false);
    
    const handleChecked = (event) => {
        setIsChecked(event.target.checked);
    };

    return (
        <div className='App'>
            <input type = "checkbox" checked = {isChecked} onChange = {handleChecked} />
            {/* onChange는 input의 checkbox가 바뀔 때마다 발생하는 이벤트 */}
            <span> {isChecked ? "Checked!!" : "Unchecked"} </span>
        </div>
    )
}

이벤트 처리 방법