Inflearn brand logo image

Inflearn Community Q&A

bahang122821's profile image
bahang122821

asked

[Renewal] Creating NodeBird SNS with React

Redux + onClick

Written on

·

363

0

제로초님 안녕하세요 강의 잘 보고있습니다 감사합니다 ^^

제로초님 리덕스 강의를 보고 응용하여 제 나름 컴포넌트를 하나 만들어보고 있는데요,

아래와 같이 2개의 객체 배열을 이용하여 맵함수로 헤더메뉴를 그리는 코드입니다. 

onClick 이벤트 사용 시  화살표 함수로 선언해주면 해당 onClick 이벤트를 클릭하지 않는 이상

렌더링 이후 실행되지 않는 걸로 알고 있습니다. 

1. 최초 렌더링 시에는 아래 두개 onClick이벤트가 실행 되지는 않습니다.

2. 이후 첫번째 onClick={(e)=>onPrimary(index, e)} 클릭 시 두번째 onClick={(e)=>onSecondary(index, num, e)}도 실행 되지는 않습니다.

[문제 위치] 3. 두번째 onClick={(e)=>onSecondary(index, num, e)} 클릭 시 해당 클릭된 함수 실행 이후 첫번째 onClick이벤트도 같이 실행되는데 원인이 뭔지 모르겠네요, 이틀째 붙잡고 헤매다 질문드립니다.

onclickNext.jsreduxexpressreactnodejs

Answer 1

0

zerocho님의 프로필 이미지
zerocho
Instructor

이벤트 버블링 현상 때문에 클릭 이벤트가 onSecondary가 있는 a에서 부모에게 계속 전파되어 onPrimary가 있는 li까지 이벤트가 실행됩니다.

onSecondary의 e에서 e.stopPropagation() 호출하세요.

bahang122821님의 프로필 이미지
bahang122821
Questioner

아, 말씀하신대로 했더니 문제 없이 잘 되네요 ㅎ

정말 감사합니다 ^^

bahang122821's profile image
bahang122821

asked

Ask a question