React 요약 5 - 이벤트 처리

기본 이벤트 처리

function Button() {
  const handleClick = (e) => {
    // e는 합성 이벤트(SyntheticEvent) 객체
    console.log('Button clicked', e);
    e.preventDefault(); // 기본 동작 방지
    e.stopPropagation(); // 이벤트 버블링 중지
  };
  
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

코멘트: React의 이벤트는 실제 DOM 이벤트를 감싸는 합성 이벤트(SyntheticEvent)입니다. 이는 브라우저 간 호환성을 보장하고 성능을 최적화하기 위한 것입니다. 대부분의 경우 네이티브 DOM 이벤트와 동일하게 작동합니다.

이벤트 핸들러에 매개변수 전달

function ItemList() {
  const items = ['Apple', 'Banana', 'Cherry'];
  
  // 방법 1: 화살표 함수 사용
  const handleItemClick = (item, e) => {
    console.log(`Clicked on ${item}`, e);
  };
  
  return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={(e) => handleItemClick(item, e)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

코멘트: 이벤트 핸들러에 매개변수를 전달할 때는 화살표 함수를 사용하는 것이 일반적입니다. 이렇게 하면 이벤트 객체와 함께 추가 데이터를 전달할 수 있습니다.

이벤트 위임 패턴

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a project' },
    { id: 3, text: 'Deploy to production' }
  ];
  
  // 이벤트 위임: 부모 요소에서 모든 항목의 클릭을 처리
  const handleListClick = (e) => {
    // 클릭된 요소 또는 그 부모에서 data-id 속성 찾기
    const li = e.target.closest('li');
    if (!li) return;
    
    const id = Number(li.dataset.id);
    console.log(`Todo clicked: ${id}`);
    
    // 버튼에 따라 다른 동작 수행
    if (e.target.classList.contains('delete-btn')) {
      console.log(`Delete todo: ${id}`);
    } else if (e.target.classList.contains('edit-btn')) {
      console.log(`Edit todo: ${id}`);
    }
  };
  
  return (
    <ul onClick={handleListClick}>
      {todos.map(todo => (
        <li key={todo.id} data-id={todo.id}>
          <span>{todo.text}</span>
          <button className="edit-btn">Edit</button>
          <button className="delete-btn">Delete</button>
        </li>
      ))}
    </ul>
  );
}

코멘트: 이벤트 위임(Event Delegation)은 많은 요소에 개별적으로 이벤트 리스너를 추가하는 대신, 부모 요소에 하나의 이벤트 리스너를 추가하는 패턴입니다. 이는 메모리 사용량을 줄이고 동적으로 추가되는 요소에 대해서도 이벤트 처리가 가능하게 합니다. React에서는 합성 이벤트 시스템이 내부적으로 이벤트 위임을 사용하지만, 위와 같은 패턴으로 명시적으로 구현할 수도 있습니다.

폼 이벤트 처리

import { useState } from 'react';

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });
  
  // 입력 필드 변경 처리
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value // 계산된 속성명(computed property name)
    });
  };
  
  // 폼 제출 처리
  const handleSubmit = (e) => {
    e.preventDefault(); // 페이지 새로고침 방지
    console.log('Form submitted:', formData);
    // API 호출 등의 로직...
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

코멘트: React에서 폼을 다룰 때는 “제어 컴포넌트(Controlled Component)” 패턴을 주로 사용합니다. 이 패턴에서는 폼 요소의 값을 React 상태로 관리하고, onChange 이벤트로 업데이트합니다. 이렇게 하면 폼 데이터에 대한 완전한 제어권을 가질 수 있고, 유효성 검사나 조건부 렌더링 등의 기능을 쉽게 구현할 수 있습니다.