React로 customOverlay 만든후 onclick 이벤트넣기

우선 문의 게시판을 통해 customOverlay가 kakao.add.event() 에 해당하지 않은 오브젝트임을 알았습니다.
그래서 onclick을 사용하여 함수를 부르려 했습니다. render(return) 쪽에 스크립트를 넣어도 보았고 클래스안에 메소드를 만들어 넣어보기도 했습니다. 하지만 클릭은 인식하지만 함수는 불러오지 못합니다… 혹시 방법이 있을까요.??
image
오류 사진입니다.

====오류부분 코드입니다. 생략되어있습니다.====

makeCustomOverlay(map){
const positions={
content:
<div class="buskers">+
<button onClick="button_click()" type="button" class="btn">+
<span class="busker-name">${this.state.profile[1].nickname}</span>+
<img src=${this.state.profile[1].profilImg}>+
</button>+
<script> function button1_click() { console.log("버튼1을 누르셨습니다."); } </script>+
’ ’

  ,
  latlng: this.state.profile[2].latlng
}
this.mark(map,positions)

}

mark(map,positions){
//==> latlng: new kakao.maps.LatLng(latitude, longitude) 에 넣음
for (var i = 0; i < this.state.profile.length; i ++) {
var customOverlay = new kakao.maps.CustomOverlay({
position: positions.latlng,
content: positions.content
});
customOverlay.setMap(map);
};
}

실행 화면 입니다.
image

커스텀 오버레이의 컨텐츠 이벤트 등록은 아래 답변 참고해주세요.

정말 감사합니다… 댓길 달아주신2개 중에 ‘닫기가 가능한 커스텀 오버레이’ 에서 많은 도움을 받았습니다.

리액트로 작업하다보니 content에서 만든 class를 querySelector로 못 불러와서 onclick같은 이벤트들을 넣어야 할 방법을 몰랐는데

content의 구조를 저런식으로 만든다면 된다는걸 바로 깨달아버렸습니다.

정말 감사합니다… ㅜㅜㅜㅜㅜㅜㅜㅜㅜ

좋아요 1