[TROUBLESHOOTING] REACT map 함수로 감싸진 'ONCLICK' METHOD 가 페이지 렌더링 시 실행되는 에러

ERROR ❌

// FE
const handleReplyDelete(props){
    console.log(props.replyId)
}

...

<button onClick={handleReplyDelete(reply)}>Delete</button>

onClick 이벤트를 넣은 버튼을 눌렀을 때 props 로 넣어준 reply 가 제대로 넘겨주는지 확인하기 위해 console에 replyId 를 출력하는 간단한 이벤트를 발생시켜보았다.

그런데

페이지를 Rendering 할 때 onClick 이벤트가 자동으로 작동된 뒤, 버튼을 눌러도 console 에 replyId 를 찍어주지 않았다.

Rendering 할 때 작동 된 뒤로는 버튼이 전혀 반응이 없어서 너무 의아했다.

해결 ✅

<button onClick={()=>{handleReplyDelete(reply)}}>Delete</button>

이렇게 Arrow Function 을 사용해 한 번 더 함수로 만들어주면 렌더링할 때 작동하지 않고, 버튼을 눌렀을 때만 잘 작동한다.

너무 기본적인 건데 너무 기본적인 거라 찾아도 찾아도 안 나와서 눈물 찔끔 흘렸다.

아니 근데 이게 기본적인 게 맞나 모르겠다.
map 함수로 감싼 상태의 onClick 메서드만 저런다.

아무튼 해결😉

끝