Published on

5단계: DOM 이벤트 처리

5-1. React의 이벤트 시스템 이해하기

React는 브라우저의 이벤트를 직접 처리하지 않고 자체적으로 구성된 SyntheticEvent 시스템을 통해 관리합니다.

  • 모든 이벤트는 문서 최상단(document)에서 처리됨 (이벤트 위임 방식)
  • 이벤트 핸들러는 컴포넌트에 등록되지만 실제로는 document에 위임됨

5-2. 기본적인 DOM 이벤트 처리 방식

JSX에서는 이벤트 이름을 camelCase로 작성하고 함수 참조를 중괄호로 전달합니다.

<button onClick={handleClick}>클릭</button>
<input onChange={handleChange} />

5-3. 이벤트 객체(SyntheticEvent)의 특징

React는 브라우저 이벤트를 래핑하여 호환성을 보장하는 SyntheticEvent를 제공합니다.

function handleClick(e) {
  e.preventDefault();
  console.log(e.target);
}
  • e.persist() 없이 비동기 처리 시 객체가 풀리므로 주의

5-4. 입력 이벤트 처리

입력 필드와 상태를 연결하는 Controlled Component 방식이 권장됩니다.

const [text, setText] = useState("");
<input value={text} onChange={(e) => setText(e.target.value)} />

5-5. 커스텀 이벤트 구현

React는 DOM의 CustomEvent 대신 props를 통해 상위 → 하위 이벤트 핸들링을 수행합니다.

function Child({ onNotify }) {
  return <button onClick={onNotify}>클릭</button>;
}

function Parent() {
  const handleNotify = () => alert("클릭됨");
  return <Child onNotify={handleNotify} />;
}

5-6. 이벤트 위임 구조

React는 이벤트를 루트(document)에 바인딩하고 내부적으로 이벤트를 분배합니다. 이는 성능상 유리하며 메모리 사용도 절감됩니다.

5-7. 성능 최적화를 위한 핸들러 작성 팁

  • useCallback으로 함수 재생성 방지
  • 무분별한 onScroll, onMouseMove 사용 자제
  • 핸들러 외부 선언으로 참조 유지

5-8. 고급 이벤트 처리

React는 다음과 같은 다양한 DOM 이벤트도 지원합니다:

  • 키보드: onKeyDown, onKeyUp
  • 포커스: onFocus, onBlur
  • 마우스: onMouseEnter, onMouseLeave

요약

  • React의 이벤트는 SyntheticEvent로 추상화되어 있고 document에 위임됨
  • JSX에서는 이벤트 이름을 camelCase로 작성하고 중괄호로 전달
  • 커스텀 이벤트는 props를 통해 구성
  • 성능 최적화를 위해 핸들러 선언과 useCallback 사용이 중요

심화학습

Q1. React의 SyntheticEvent가 자동으로 풀리는 이유는?
A1. 메모리 최적화를 위해 이벤트가 끝난 후 이벤트 객체를 재사용하거나 삭제합니다. 비동기에서 사용할 경우 참조가 끊기므로 복사하거나 persist를 호출해야 합니다.

Q2. 이벤트 핸들러가 컴포넌트 내부에 정의될 경우 발생할 수 있는 문제는?
A2. 컴포넌트가 렌더링될 때마다 함수가 재생성되어 하위 컴포넌트에 불필요한 리렌더링을 유도할 수 있습니다.

Q3. 커스텀 이벤트를 props로 처리하는 구조의 장점은?
A3. 하위 컴포넌트는 UI에 집중하고 실제 동작은 부모가 제어함으로써 관심사의 분리가 가능해지고, 재사용성과 테스트 용이성이 높아집니다.