함수형 컴포넌트 onClick 실행안되는 원인

뭔가 내가 저렇게 검색했었던 것 같아서 제목을 이렇게 지었다.

 

 

 

 

데이터 배열을 map함수로 쪼개서 렌더링 하는 코드이다.

 

onClick을 적용했기에, 분명 클릭했을 때 console.log(“ㅎㅇ”)가 실행될 거라고 생각했지만, 항상 실행이 안 됐다.

 

 

 

 

 

그래서 위와 같은 방식으로, div 태그를 한번 더 씌우고 div에 onClick 이벤트를 적용했었는데, 오늘 해결책을 알았다!.!

 

 

 

 

 

 

일반 HTML 요소에 직접적으로 이벤트 핸들러를 추가할 때는 해당 요소에 이벤트 리스너를 직접 연결하고, 클릭 등의 이벤트가 발생하면 이벤트 핸들러가 실행되지만! 리액트 컴포넌트는 클릭과 같은 이벤트를 처리하도록 내장된 기능이 없으며, 대신 props로 전달하여 처리할 수 있도록 한다고 한다.

 

 

즉! 지금까지 내가 컴포넌트에 적용한 onClick은 ‘onClick’이라는 props로 컴포넌트에 전달됐던 것……

 

 

 

 

 

해결을 위해서 HakDetail 컴포넌트로 이동 후 ‘onClick’ Props를 전달받는다.

 

저 ‘onClick’ props에는 ()=>console.log(“ㅎㅇ”)가 들어있으며, 최상위 div(HTML) 태그에서 onClick 이벤트를 통해 실행시키면….

 

 

 

 

 

클릭했을 때 console.log(“ㅎㅇ”)가 잘 실행되는 것을 확인할 수 있다.

 

 

 

 

 

작년 10월부터 궁금했던 건데, 관련된 글을 못 찾았던 건지, 없었던 건지 아무튼  “일단 되게 하고 넘어가자~~” 하고 div태그를 씌웠었다. 그러다 오늘에서야 이유를 알게 되니 뭔가 너무 후련~,~

 

너무 당연한(?) 내용이라 글이 없었던 거 같기도 하고? 암튼 이제라도 알았으니 됐다~