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이벤트도 같이 실행되는데 원인이 뭔지 모르겠네요, 이틀째 붙잡고 헤매다 질문드립니다.
Answer 1
0
이벤트 버블링 현상 때문에 클릭 이벤트가 onSecondary가 있는 a에서 부모에게 계속 전파되어 onPrimary가 있는 li까지 이벤트가 실행됩니다.
onSecondary의 e에서 e.stopPropagation() 호출하세요.
아, 말씀하신대로 했더니 문제 없이 잘 되네요 ㅎ
정말 감사합니다 ^^