[React] 컴포넌트에 함수 전달 # 각 함수 형태의 차이

다들 React를 사용하시면서 컴포넌트의 이벤트에 함수를 전달해보신 적이 있으실텐데요.
저는 이번 프로젝트를 하면서 이벤트에 보내주는 함수의 형태에 의문을 가지게 되었습니다.

<S.Btn type="submit" onClick={btnClick}>

보통 위와 같은 형태로 onClick 이벤트에 대한 함수를 전달할 때 btnClick라고만 쓰시는 경우가 많을텐데요.
저도 마찬가지로 제가 알고 있는 함수의 형태가 btnClick()이지만 이벤트로 넘겨줄 때에는 ()를 제거하고 사용하고 있습니다.

이것에 대한 의문을 해결하고자 여기 저기 찾아보다 정말 쉽게 설명해주는 글이 있어 함께 소개하고자 합니다.

https://react.vlpt.us/basic/14-array-remove.html - 리액트 벨로퍼트

위의 링크 자체의 내용은 현재의 주제와는 크게 상관있는 내용은 아니지만 아래 댓글 중 1005hoon님께서 공유해주신 내용이 있습니다. (https://github.com/1005hoon - 1005hoon님의 깃헙주소) 저는 이 댓글을 보고 모든 의문을 해결할 수 있어 정말 감사한 마음에 "따봉"도 눌러드렸습니다. 허허..

공부하고자 하는 마음에, 그리고 같은 문제를 고민하고 계신 분들을 위해 요약 정리를 해보고자 합니다.

---

우선, 이벤트에 대한 함수를 전달해줄 때에는 onClick={someFunction}로 보통 사용합니다.
그 이유는 렌더링 과정에 있는데 전달함수에 '()' 소괄호가 붙으면 페이지가 렌더링될 때 즉시 실행되게 되어 원하는 기능을 구현하지 못합니다.
하지만 특정 전달인자를 넣어서 보내야할 때는 onClick={someFunction(value)}로 써야 되나라는 의문이 드는데요.
그때는 화살표 함수를 사용하면 된다고 합니다. onClick={() => {someFunction(value)}} 이렇게 되면 즉시실행 되지 않고 제대로 기능이 작동한다고 하니 앞으로 개발하실 때 참고해주시면 좋겠습니다!

일반적인 상황
<S.Btn type="submit" onClick={btnClick}>

즉시 실행
<S.Btn type="submit" onClick={btnClick()}>

즉시 실행 & 인자를 함께 전달
<S.Btn type="submit" onClick={btnClick(value)}>

인자를 함께 전달
<S.Btn type="submit" onClick={() => btnClick(value)}>

---

해당 답변은 다음의 질문에서부터 시작됐습니다.

질문
onClick={() => onRemove(user.id)} 이 코드는 잘 동작하는데
onClick={onRemove(user.id)} 이 코드는 왜 동작하지 않는건가요?

그리고 이에 대해 정말 쉽게 답변을 해주셨습니다.

답변
onClick={someFunction()} 을 해버리면 해당 콤포넌트가 렌더링이 되는것과 동시에 someFunction함수를 실행시켜버립니다. 그래서 보통 onClick={someFunction} 으로 지정해서 () 를 제외하는 방법으로 함수가 즉시실행 되지 않게 하고, 클릭했을때 실행이 되도록 해주죠. 그런데 예제와 같이 onRemove의 경우, 해당 함수가 실행될 떄 아이디 값도 받아와야 하잖아요. 이런 경우에 onClick = { onRemove(user.id) } 를 해버리면, 해당 콤포넌트가 렌더링됨가 동시에 이 함수 실행이 되어버려서 아마 아무것도 렌더링이 되어버리지 않을거에요. 콘솔에서도 오류메시지가 발생할거구요. 따라서 이런 문제들을 해결하기 위해 onClick에 콜백 함수를 넣어주고, 해당 함수가 실행될 때 user.id를 건네주어 실행시키는 방법으로 처리를 하는거에요.