이벤트 시스템 — React의 SyntheticEvent는 왜 존재하는가

// 개발자가 작성하는 코드
function App() {
  return (
    <div onClick={() => console.log('div')}>
      <button onClick={() => console.log('button')}>
        클릭
      </button>
    </div>
  );
}

// React 내부 동작 (개념적)
// root.addEventListener('click', (nativeEvent) => {
//   const syntheticEvent = new SyntheticEvent(nativeEvent);
//   // React Fiber 트리에서 해당 컴포넌트를 찾아 핸들러 실행
// });

// React 16: document.addEventListener(...)
// React 17+: rootNode.addEventListener(...)

const root = document.getElementById('root');
// 이벤트 핸들러가 여기에 등록됨

function handleClick(event) {
  // SyntheticEvent 속성들
  console.log(event.type);          // 'click'
  console.log(event.target);        // 클릭된 실제 DOM 요소
  console.log(event.currentTarget); // 핸들러가 등록된 DOM 요소
  console.log(event.nativeEvent);   // 브라우저 원본 이벤트

  // 메서드들
  event.preventDefault();           // 기본 동작 방지
  event.stopPropagation();          // React 트리 내 전파 중지
}

function EventFlow() {
  return (
    <div
      onClickCapture={() => console.log('1. div 캡처')}
      onClick={() => console.log('4. div 버블')}
    >
      <button
        onClickCapture={() => console.log('2. button 캡처')}
        onClick={() => console.log('3. button 버블')}
      >
        클릭
      </button>
    </div>
  );
}

// 버튼 클릭 시 출력 순서:
// 1. div 캡처
// 2. button 캡처
// 3. button 버블
// 4. div 버블

function Parent() {
  return (
    <div onClick={() => console.log('parent — 이것은 실행되지 않음')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation(); // React 트리 내 전파만 중지
    console.log('child');
  };

  return <button onClick={handleClick}>클릭</button>;
}

function VideoPlayer() {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;

    // React에서 지원하지 않는 이벤트는 직접 등록
    const handleFullscreen = () => {
      console.log('전체화면 변경');
    };

    video.addEventListener('fullscreenchange', handleFullscreen);
    return () => video.removeEventListener('fullscreenchange', handleFullscreen);
  }, []);

  return <video ref={videoRef} src="/video.mp4" />;
}

function HybridEvents() {
  const buttonRef = useRef(null);

  useEffect(() => {
    // 네이티브 이벤트: React보다 먼저 실행됨
    buttonRef.current.addEventListener('click', () => {
      console.log('1. 네이티브 핸들러');
    });
  }, []);

  const handleClick = (e) => {
    console.log('2. React 핸들러');
  };

  // 클릭 시: "1. 네이티브 핸들러" → "2. React 핸들러"
  return <button ref={buttonRef} onClick={handleClick}>클릭</button>;
}

function LoginForm() {
  const handleSubmit = (e) => {
    e.preventDefault(); // 폼의 기본 제출 동작 방지
    // 커스텀 제출 로직
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        onChange={(e) => console.log(e.target.value)}
        onFocus={() => console.log('포커스 획득')}
        onBlur={() => console.log('포커스 잃음')}
      />
      <button type="submit">로그인</button>
    </form>
  );
}

function SearchInput() {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      // Enter 키 처리
      performSearch();
    }
    if (e.key === 'Escape') {
      // ESC 키 처리
      clearInput();
    }
  };

  return <input onKeyDown={handleKeyDown} placeholder="검색..." />;
}

function ItemList({ items }) {
  const handleDelete = (id) => {
    console.log(`${id} 삭제`);
  };

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          {/* 방법 1: 화살표 함수 */}
          <button onClick={() => handleDelete(item.id)}>삭제</button>

          {/* 방법 2: bind (덜 사용됨) */}
          <button onClick={handleDelete.bind(null, item.id)}>삭제</button>
        </li>
      ))}
    </ul>
  );
}

// ❌ React stopPropagation이 document 리스너를 막지 못함
function Modal({ onClose }) {
  useEffect(() => {
    const handleClick = () => onClose(); // 항상 실행됨
    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
  }, [onClose]);

  return (
    <div onClick={(e) => e.stopPropagation()}>
      {/* stopPropagation이 document 리스너를 막지 못함 */}
    </div>
  );
}