이벤트 처리 해부: React 이벤트 시스템

핵심 개념

React 이벤트는 camelCase로 작성합니다(onClick, onChange). 이벤트 핸들러는 함수 참조를 전달합니다. 합성 이벤트(SyntheticEvent)로 브라우저 호환성을 보장합니다. e.preventDefault()로 기본 동작을 막습니다. 이벤트를 지우며 인터랙션이 어떻게 사라지는지 확인하십시오.

코드 분석

REACT📋 코드 (27줄)







const { useState } = React;

  function EventDemo() {
    const [log, setLog] = useState([]);
    const addLog = (msg) => setLog(prev => [msg, ...prev].slice(0, 5));

    return (
      <div>
        <div style={{display:'flex', gap:'8px', marginBottom:'12px', flexWrap:'wrap'}}>
          <button onClick={() => addLog('[CLICK] 버튼 클릭 감지')} style={{background:'#10b981', color:'#080808', border:'none', padding:'8px', cursor:'pointer', fontFamily:'monospace', fontSize:'11px'}}>CLICK</button>
          <input onFocus={() => addLog('[FOCUS] 입력창 포커스')} onBlur={() => addLog('[BLUR] 포커스 해제')} onChange={e => addLog('[INPUT] 값: ' + e.target.value)} placeholder='입력...' style={{background:'#1a1a1a', color:#e8e8e8', border:'1px solid #333', padding:'8px', fontFamily:'monospace'}} />
        </div>
        <div style={{borderTop:'1px solid #1a1a1a', paddingTop:'8px'}}>
          {log.map((l, i) => <div key={i} style={{color:'#888', fontSize:'11px', marginBottom:'2px'}}>{l}</div>)}
          {log.length === 0 && <div style={{color:'#333', fontSize:'11px'}}>이벤트 대기중...</div>}
        </div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<EventDemo />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '이벤트 처리' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'이벤트 처리'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '이벤트 처리' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '이벤트 처리' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

이벤트 처리 해부: React 이벤트 시스템은 이 3가지만 확실히 잡으세요

1.addEventListener를 직접 사용하면 컴포넌트 해제 시 리스너가 남아서 메모리 누수가 발생합니다

2.React는 합성 이벤트(SyntheticEvent)로 브라우저 차이를 통일하며, JSX에 onClick·onChange 형태로 직접 바인딩합니다

3.다음 챕터에서 입력 값을 React 상태로 제어하는 Controlled Component 패턴을 배웁니다

💬 이 챕터 질문 보기

REACT · CH.15 — 질문하거나 답변을 확인하세요

→

진행도 15 / 34

← 커리큘럼으로 ← 목록으로 (React)