리액트에서 addEventListner는 별로 사용하지 않나요?

Question

onclick에 비해 addEventListner('click',eventhandler)의 이점으로

이벤트핸들러를 여러개 계속 더해줄수 있고, 세번째 인자로 버블링 캡처링 조정이 된다는 점이 있다고 들어서 무작정 저는 addEventListner가 더 좋은줄 알고 있었는데요.

강의 중에선 onClick을 많이 쓰는 것 같아 질문드립니당

리액트의 onClick은 addEventListner에 비해 나은 장점이 있나요? 혹은 addEventListner를 쓰면 안될 이유가 있나요?

Answer

리액트에서도 충분히 addEventListener를 사용할 수 있습니다.

써야 하는 경우도 많구요 ㅎㅎ

(e.g. window.postMessage 쓸 때 등)

다만 onClick(기본 자바스크립트에서와는 다르게 c가 대문자죠?), onMouseOver등으로 엘리먼트에 직접 이벤트핸들러를 달아주는걸 선호하는 이유는

리액트의 디자인 철학 때문이에요.

바로 리액트의 '선언적 특성' 인데요,

button.addEventListner('click', handleClickButton) 이라고

"A상황에는 B를 하라"라고 명령하는것보다

<button onClick={handleClickButton} /> 처럼

"이 버튼이 클릭되면 handleClickButton를 호출해라"라고 JSX안에서 선언하는게

더 이해하기 쉬운 코드를 만들거라는 철학입니다.

https://youtu.be/edWbHp_k_9Y

선언형/명령형이 더 궁금하다면 이 발표를 참고하세요!

+ 버블링 등 조정은 e.stopPropagation으로 하시면 됩니다