왜 onClick과 같은 eventListener들은 콜백 함수를 주로 사용할까?

우리가 onClick같은 함수에 인자를 추가할때 많은 상황에서 콜백 함수를 주로 사용하는 것을 볼 수 있다. 왜 그럴까?

 

onClick = {() => clickBtn()}
onClick = {clickBtn}

 

사실 위와 같은 상황은 별 다른 차이가 없다. 뭐 똑같다고 봐도 상관없다.

 

단지 아래와 같은 상황에서 콜백 함수를 사용해야 코드가 의도된대로 작동할 것이다.

onClick = {(arg) => clickBtn(arg)}
onClick = {clickBtn(arg)}

 

onClick에 함수가 괄호를 포함하게 되면 해당 함수를 즉시 실행하게 된다. 인자가 없을 때 onClick = {clickBtn()}을 실행한 것과 같은 상황이 된다. 

그러한 이유로 onClick시 실행되려하는 함수에 인자를 넣기위해서는 콜백 함수를 쓸수 밖에 없다.

 

더 자세한 내용은 아래의 글들을 참조!

https://velog.io/@deepthink/React-onClick-%ED%95%A8%EC%88%98%EC%97%90-%EC%99%9C-callback-%ED%98%95%ED%83%9C%EB%A1%9C-%EC%9E%91%EC%84%B1%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C

onClick 함수에 왜 callback 형태로 작성해야 할까?

https://velog.io/@dpldpl/React-%EB%B2%84%ED%8A%BC-onClick-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%AC%EB%A5%BC-%EC%BD%9C%EB%B0%B1%EC%9C%BC%EB%A1%9C-%EB%84%A3%EC%96%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-React-typescript

React 버튼 onClick 이벤트 핸들러를 화살표 콜백으로 넣어야 하는 이유 (React-Typescript)

https://stackoverflow.com/questions/70950989/why-does-callback-to-the-event-listener-work-as-intended-while-using-the-useeffe

Why does callback to the event listener work as intended while using the useEffect hook in react?