[IT] addEventListener vs onclick ? ( addEventListener WIN )

2023.10.26 - [IT] - [IT] Tree Shaking ? webPack ?

[IT] Tree Shaking ? webPack ?

이 글에 이어서 .. 나한테 addEventListener 과 onclick 의 차이점을 아냐고 여쭤보셨다.

각각 어떻게 쓰는지를 말씀드렸는데 그게 아니라 DOM 영역에서 어떻게 되는지를 알고 계시냐고 여쭤보셨고,

난 잘 모르겠다고 말씀드렸다. 그러면서 차이점을 설명해주고, 요즘에는 addEventListener 를 더 많이 쓴다고 알려주셨다.

그럼 먼저 onClick 을 살펴보면

DOM 요소의 onclick 속성을 직접 설정하여 클릭 이벤트를 핸들링할 수 있다.
이 방식은 해당 요소에 하나의 클릭 이벤트 핸들러만 설정할 수 있다.

const button = document.getElementById('myButton');
button.onclick = function() {
    console.log('Button was clicked!');
};

addEventListener

JavaScript 코드 내에서 addEventListener 메소드를 사용하여 요소에 클릭 이벤트 리스너를 추가할 수 있다.
이 방식은 여러 리스너를 하나의 요소에 추가할 수 있기 때문에 더 유연하다.

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('Button was clicked!');
});

onClick 은 하나의 요소에 하나의 이벤트만 설정할 수 있는 제약때문에 현대의 웹 개발에서는

addEventListener를 주로 사용하는 추세라고 한다.

그럼 내가 사용하고있는 React 는 함수 여러 개를 설정해도 상관없던데 무슨 차이냐고 물어보려고 하니까 먼저 말씀해주셨는데

합성 이벤트 (Synthetic Events) : React는 실제 DOM 이벤트를 직접 사용하지 않는다.
대신, React는 브라우저 간의 일관성을 유지하기 위해 합성 이벤트라는 래퍼를 사용한다.

이벤트 위임 : React는 DOM 요소마다 이벤트 리스너를 붙이지 않는다. 대신
최상위 레벨에서 단 하나의 이벤트 리스너만 사용하여 이벤트를 처리한다.
이로 인해 메모리 사용량이 줄어들고 더 빠른 이벤트 처리가 가능해진다.

JSX 문법 : React에서는 JSX를 사용하여 이벤트 핸들러를 지정한다.

이러한 성격때문에 addEventListener 과 똑같다 !! 라고는 말할 수 없지만 유사하게 동작하는 이유이다.

다른 개발자님은 나처럼 React 개발을 하고 있는 것도 아니신데 나보다 React 를 더 많이 알고 계시더라.

그러면서 나에게 하시는 말씀이 더 최근에 나온 언어로 개발하는 것도 좋을 수 있지만, 내가 사용하고 있는 언어에 대해서 자세히 알아야한다. 어떤 언어든 사용하기 전에 아니면 사용하면서라도 공식문서는 꼭 읽어봐라.

 

라고 말씀해주셨다. 틀린말 하나없지만 .. 영문으로 되어있기도 하고 이해하기도 힘들지만 .. 어쩔수있나 .. 개발하려면 열심히 해야지

시작하기 – React