Redux + onClick

Question

제로초님 안녕하세요 강의 잘 보고있습니다 감사합니다 ^^ 제로초님 리덕스 강의를 보고 응용하여 제 나름 컴포넌트를 하나 만들어보고 있는데요, 아래와 같이 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이벤트도 같이 실행되는데 원인이 뭔지 모르겠네요, 이틀째 붙잡고 헤매다 질문드립니다.

제로초(조현영) · Answer

이벤트 버블링 현상 때문에 클릭 이벤트가 onSecondary가 있는 a에서 부모에게 계속 전파되어 onPrimary가 있는 li까지 이벤트가 실행됩니다. onSecondary의 e에서 e.stopPropagation() 호출하세요.