6.1.3 React 합성 이벤트 객체 다루기

브라우저에 따라 W3C 명세(www.w3.org/TR/DOM-Level-3-Events 참조)를 다르게 구현할 수 있다. DOM 이벤트를 다룰 때, 이벤트 핸들러에 전달되는 이벤트 객체에 다른 프로퍼티나 메서드가 있을 수도 있다.

브라우저 간의 차이로 인해 이벤트를 처리하는 코드를 작성할 때 크로스 브라우징 문제를 경험할 수 있다. 예를 들어 IE8에서 대상 요소를 가져오려면 event.srcElement에 접근하지만, Chrome, Safari, Firefox 브라우저에서는 event.target으로 접근한다.

var target = event.target || event.srcElement
console.log(target.value)

 

당연한 이야기지만, 크로스 브라우징 문제는 10년 전에 비해 많이 나아졌다. 그렇다고는 해도 잘 알려지지 않은 브라우저 간의 구현 차이 때문에 명세를 읽고 디버깅을 하는 데 시간을 쓰고 싶어 하는 사람은 없을 것이다.

크로스 브라우징 문제가 좋지 않은 것은 다른 브라우저에서도 같은 사용자 경험을 제공해야 하기 때문이다. 일반적으로 브라우저 API의 차이를 처리하기 위해 if/else 문 같은 코드를 더 작성해야 한다. 서로 다른 브라우저에서 테스트해야 하는 불편함도 있다. 즉, 크로스 브라우징 문제를 고치거나 우회하는 방법을 찾아내는 것은 CSS 문제, IE8 문제, 힙합 안경을 쓴 깐깐한 디자이너를 상대하는 것보다 훨씬 더 골치 아픈 일이다.