리액트에서 addEventListner는 별로 사용하지 않나요?
onclick에 비해 addEventListner('click',eventhandler)의 이점으로
이벤트핸들러를 여러개 계속 더해줄수 있고, 세번째 인자로 버블링 캡처링 조정이 된다는 점이 있다고 들어서 무작정 저는 addEventListner가 더 좋은줄 알고 있었는데요.
강의 중에선 onClick을 많이 쓰는 것 같아 질문드립니당
리액트의 onClick은 addEventListner에 비해 나은 장점이 있나요? 혹은 addEventListner를 쓰면 안될 이유가 있나요?
답변 1
3
리액트에서도 충분히 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으로 하시면 됩니다
API 적용 안되는 코드 수정 방법입니다.
0
84
1
고양이 이미지가 엑박이 뜨네요
0
63
1
npx 명령어 사용 불가
1
85
1
const 변수와 컴포넌트의 차이
0
94
1
강의노트
0
145
1
vite로 리액트 빌드한 후 깃허브에 배포하는 방법
0
340
1
빌드할때 dist 폴더가 만들어지는데요,
0
796
1
js파일 업로드 요청
0
139
1
변경된 api 사용시 text 안나오는 문제
0
150
1
메인글자수정...
1
280
3
디렉터리 구조 관련하여 참고할 만한 예시가 있을까요?
1
315
1
https://cataas.com/undefined 로 나오는데 왜그런건가요?
1
609
4
고양이 사진이 깨져요.ㅜㅜ
2
363
3
강의 노트 위치를 모르겠습니다
1
347
1
깃 강의노트 어디서 볼 수 있나요?
1
382
2
이해가 안되는 부분이 있어요
1
366
1
api가 안불러와지네요...
1
670
4
진유림 선생님 너무 궁금해서 질문드립니다 ㅜ
1
336
2
react에서 컴포넌트 만들 때 대문자를 쓰는 이유
2
1162
2
https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ
1
335
2
index.js 내용이 바꼈네용
1
321
2
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
1
262
2
html 코드 오류
1
464
2
고양이 이미지 깨져요
1
343
2