🖋️ Event 처리 방법을 비교하기

• Vanilla JavaScript

  • DOM 의 네이티브 이벤트 시스템과 직접 상호 작용

  • 이벤트 이름에 소문자를 사용 (ex , 'click')

  • 이벤트 처리기를 요소에 직접 할당 (addEventListener)

document.getElementById('myButton').addEventListener('click', () => {
   console.log('Button Click!');
});

• React

  • 네이티브 브라우저 이벤트를 래핑하는
    합성 이벤트 시스템을 통해 DOM 의 이벤트를 추상화
    브라우저에서 일관된 인터페이스가 제공

  • 이벤트는 소문자가 아닌 카멜 표기법을 사용하여 명명 (ex , 'handleClick')

  • 문자열이 아닌 이벤트 핸들러로 함수 전달

function MyComponent() {
    // 'event' here is a React SyntheticEvent
    const handleClick = (event) => {
        console.log('Button clicked!');
    };

    return <button onClick={handleClick}>Click me</button>;
}

그런데

이벤트를 래핑하는 합성 이벤트 시스템 ?
DOM 의 이벤트를 추상화 브라우저에서 일관된 인터페이스 ?

• React SyntheticEvent

  • 브라우저의 네이티브 이벤트를 여러 브라우저에서 일관된 API로 래핑하는 방법
  • 브라우저의 기본 이벤트와 동일한 인터페이스
  • 모든 브라우저에서 동일하게 작동
    
    
  • 크로스 브라우저 인터페이스를 제공하여 이벤트 처리를 단순화
    
    
  • 목적
    • 동일한 속성과 동작을 갖도록 이벤트를 정규화
    • 브라우저간 호환성 문제 해결
      
      
  • 작동 원리
    • 이벤트가 발생
    • React 가 브라우저 기본 이벤트 기반 Synthetic Event 생성
    • JSX 에서 정의한 이벤트 핸들러에 전달되는 것

• Event 속성 액세스

  • target, currentTarget, preventDefault, stopPropagation

    const handleChange = (e) => {
       console.log(e.target.value);
    }

    
    

• Event Pooling

  • 성능상 이유로 이벤트 객체를 재사용
  • 이벤트 콜백이 호출된 후에는 해당 속성이 무효화
  • 이벤트에 비동기적으로 액세스해야 하는경우 풀링을 Opt Out 하도록 호출
  • persist()
    
    
  • React 17은 합성 이벤트 풀링을 중지, 이벤트 처리가 더 단순화

• Event Deligation

  • React 는 Event Deligation 을 자동으로 처리
  • 여러 자식에 대한 이벤트를 처리하기 위해
    Event Deligation 을 수동으로 설정 가능한 Vanilla Javascript
  • But, React 의 이벤트 시스템은 이 작업을 수행
  • Event Handler 를 부모 요소에 연결 가능 (자식에서 이벤트를 Catch)

    // 자식 요소에 접근
    const handleChange = (e) => {
       console.log(e.target.dataset.id);
    }
    
    <ul>
      <li data-id="1">Item 1</li>
      <li data-id="2">Item 2</li>
    </ul>

    
    

• Event 동작 사용자 정의

  • 필요에 따라 preventDefault, stopPropagation 사용

    const handleSubmit = (e) => {
       e.preventDefault();
       // more ...
    }

    
    

• 추가 인수 전달

  • 이벤트 처리기에 추가 인수 전달해야 하는 경우
  • Function.prototype.bind

    const handleSubmit = (itemId, e) => {
       console.log("Item Id : ", itemId)
    }
    
    <button onClick={(event) => handleItemClick(1, event)}>Item 1</button>
    <button onClick={handleItemClick.bind(this, 2)}>Item 1</button>

    
    

• 지원되는 이벤트

  • Form, Mouse, Keyboard 등 다양한 이벤트 지원