Event Handling

 

이벤트 처리 (Event Handling)

 

사용자의 상호작용(클릭, 입력, 제출 등)을 감지하고 처리하는 방식

 

대표적인 이벤트 핸들러

• onClick : 버튼 클릭 이벤트
• onChange : 입력 필드 값 변경 이벤트
• onSubmit : 폼 제출 이벤트

*React에서 이벤트는 CamelCase(onClick, onChange, onSubmit)로 사용

 

이벤트 핸들링 예:

• 버튼 클릭 시 값이 추가됨
• 입력 필드 값 변경 감지 후 업데이트

 

입력 필드 값 변경 감지

import { useState } from "react";

function TodoInput() {
  const [task, setTask] = useState("");

  const handleOnChange = (e) => {
    setTask(e.target.value);
  };

  return (
    <input
      value={task}
      onChange={handleOnChange}
      className="todo-input"
      type="text"
      placeholder="할 일을 입력하세요"
    />
  );
}

사용자가 입력할 때마다 handleOnChange가 실행되며, task 상태가 업데이트 됨

 

 

이벤트 핸들링과 상태 관리

 

React에서는 이벤트를 활용하여 상태 업데이트, UI를 동적으로 변경 가능

useState와 함께 이벤트 핸들러를 조합하여 상태 변화를 반영하는 것이 일반적

 

 

버튼 클릭 시 할 일 추가하기

import { useState } from "react";

function TodoApp() {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState([]);

  const handleOnChange = (e) => setTask(e.target.value);

  const handleAddTask = () => {
    if (task.trim() === "") return; // 빈 입력 방지
    setTasks([...tasks, task]); // 기존 목록에 새 항목 추가
    setTask(""); // 입력 필드 초기화
  };

  return (
    <div>
      <input
        value={task}
        onChange={handleOnChange}
        className="todo-input"
        type="text"
        placeholder="할 일을 입력하세요"
      />
      <button onClick={handleAddTask}>추가</button>
      <ul>
        {tasks.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

• handleAddTask : 입력된 값을 배열에 추가하고, 입력 필드를 초기화
• onClick 이벤트 이용, 버튼 클릭 시 할 일을 추가하도록 처리

 

폼 제출 이벤트

onSubmit을 사용하여 폼을 제출

function TodoForm() {
  const [task, setTask] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // 기본 폼 제출 동작 방지
    console.log("입력된 할 일:", task);
    setTask(""); // 입력 필드 초기화
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={task}
        onChange={(e) => setTask(e.target.value)}
        type="text"
        placeholder="할 일을 입력하세요"
      />
      <button type="submit">추가</button>
    </form>
  );
}

• e.preventDefault() : 폼 제출 시 페이지가 새로고침되는 기본 동작 방지
• onSubmit : 핸들러에서 상태를 업데이트하고 할 일을 추가하는 로직 처리

 

onClick을 사용한 EventHandling