이벤트 처리

React의 이벤트 처리 특징

• camelCase를 사용합니다 (onClick, onSubmit 등)
• JSX에서는 문자열이 아닌 함수를 이벤트 핸들러로 전달합니다
• 기본 동작을 막기 위해 preventDefault()를 명시적으로 호출해야 합니다

기본적인 이벤트 처리

function Button() {
  const handleClick = () => {
    console.log('버튼이 클릭되었습니다!');
  };

  return (
    <button onClick={handleClick}>
      클릭하세요
    </button>
  );
}

이벤트 객체 사용하기

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault(); // 폼 제출 기본 동작 방지
    console.log('폼이 제출되었습니다!');
  };

  const handleChange = (event) => {
    console.log(event.target.value); // 입력값 확인
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        placeholder="입력하세요"
      />
      <button type="submit">제출</button>
    </form>
  );
}

매개변수가 있는 이벤트 핸들러

function ItemList() {
  const handleItemClick = (id, event) => {
    console.log('클릭된 아이템 ID:', id);
  };

  return (
    <ul>
      <li onClick={(e) => handleItemClick(1, e)}>아이템 1</li>
      <li onClick={(e) => handleItemClick(2, e)}>아이템 2</li>
    </ul>
  );
}

자주 사용되는 이벤트들

1. 마우스 이벤트

function MouseEvents() {
  return (
    <div
      onMouseEnter={() => console.log('마우스 진입')}
      onMouseLeave={() => console.log('마우스 이탈')}
      onClick={() => console.log('클릭')}
      onDoubleClick={() => console.log('더블 클릭')}
    >
      마우스 이벤트 테스트
    </div>
  );
}

2. 키보드 이벤트

function KeyboardEvents() {
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      console.log('엔터키가 눌렸습니다!');
    }
  };

  return (
    <input
      type="text"
      onKeyPress={handleKeyPress}
      onKeyDown={(e) => console.log('키 다운:', e.key)}
      onKeyUp={(e) => console.log('키 업:', e.key)}
    />
  );
}

3. 폼 이벤트

function FormEvents() {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log('폼 제출!');
    }}>
      <input
        type="text"
        onChange={(e) => console.log('값 변경:', e.target.value)}
        onFocus={() => console.log('포커스!')}
        onBlur={() => console.log('블러!')}
      />
      <button type="submit">제출</button>
    </form>
  );
}

이벤트 위임 (Event Delegation)

React는 내부적으로 이벤트 위임을 구현하여 성능을 최적화합니다. 모든 이벤트는 실제로 문서 루트에서 처리되며, 이는 메모리 사용량을 줄이고 성능을 향상시킵니다.

function TodoList() {
  const handleClick = (event) => {
    if (event.target.tagName === 'LI') {
      console.log('할 일 클릭:', event.target.textContent);
    }
  };

  return (
    <ul onClick={handleClick}>
      <li>할 일 1</li>
      <li>할 일 2</li>
      <li>할 일 3</li>
    </ul>
  );
}

커스텀 이벤트 핸들러

function useEventHandler(handler) {
  return useCallback((event) => {
    event.preventDefault();
    handler(event);
  }, [handler]);
}

function CustomButton({ onClick }) {
  const handleClick = useEventHandler(onClick);
  
  return (
    <button onClick={handleClick}>
      클릭
    </button>
  );
}